百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

Sass 延伸 sas扩展口

yuyutoo 2024-10-12 00:00 7 浏览 0 评论

本节我们学习 Sass 中的延伸，也可以理解为继承。在 Sass 中，我们可以通过 @extend 指令来实现将一个选择器中的样式继承到另一个选择器中。特别是当选择器中样式几乎差不多，只有一点区别的时候，使用 @extend 就很有用啦。

延伸的使用

下面我们来通过一个例子看一下延伸的具体使用。

例如我们在网页中是不是经常会看到有不同颜色的按钮呀，这些按钮除了背景颜色不同，其他样式都几乎一样。这种情况下，我们肯定不会重复定义多个样式，而是单独定义一个公共样式，再分别定义不同颜色样式属性。

示例

例如我们通过继承来创建三个不同颜色的按钮，分别为红色、绿色、蓝色：

.btn {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: none;
    color: #fff;
}
.red-btn{
    @extend .btn;
    background-color: red;
}
.green-btn{
    @extend .btn;
    background-color: green;
}
.blue-btn {
    @extend .btn;
    background-color: blue;
}

我们首先定义了一个 .btn 选择器，这个选择器中是所有按钮的共用样式。然后我们根据需要分别定义了三个不同背景颜色的样式，来继承这个 .btn 选择器，这需要使用到 @extend 指令。在 Sass 中，同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器。

然后我们可以看一下编译后的 CSS 代码，如下所示：

.btn, .red-btn, .green-btn, .blue-btn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  border: none;
  color: #fff;
  font-size: 16px;
}
.red-btn {
  background-color: red;
}
.green-btn {
  background-color: green;
}
.blue-btn {
  background-color: blue;
}

HTML 部分的代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sass学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div>
            <button class="red-btn">红色按钮</button>
            <button class="green-btn">绿色按钮</button>
            <button class="blue-btn">蓝色按钮</button>
        </div>
    </body>
</html>

在浏览器中的演示效果：

当然如果是在 CSS 中，没有延伸，我们也可以实现上述效果，只需要在 HTML 标签中添加一个 .btn 选择器即可。

<button class="btn red-btn">红色按钮</button>
<button class="btn green-btn">绿色按钮</button>
<button class="btn blue-btn">蓝色按钮</button>

延伸复杂的选择器

在 Sass 中，除了可以延伸类选择器，Sass 还允许延伸任何定义给单个元素的选择器。

示例：

例如我们可以在一个样式类中延伸 a:hover ：

a:hover{
    color: #eb8258;
}
.xkd{
    @extend a:hover;
    font-size: 14px;
}

编译成 CSS 代码：

a:hover, .xkd {
  color: #eb8258;
}

.xkd {
  font-size: 14px;
}

继续延伸

当一个选择器延伸给第二个选择器后，可以继续将第二个选择器延伸给第三个选择器。

示例：

.one{
    font-size: 14px;
}
.two{
    @extend .one;
    color: #ccc;
    border: 1px solid #000;
}
.three{
    @extend .two;
    background-color: #fefefe;
}

编译成 CSS 样式：

.one, .two, .three 
  font-size: 14px;
}

.two, .three {
  color: #ccc;
  border: 1px solid #000;
}

.three {
  background-color: #fefefe;
}

我们使用 .two 选择器继承 .one 选择器，这样 .two 中就有了 .one 选择器中的样式。然后又使用 .three 继承 .two 选择器，这样 .three 同时有了 .one 和 .two 选择器中的样式。

相关推荐

YAML配置文件简介及使用（yaml 配置）

简介YAML是"YAMLAin'taMarkupLanguage"（YAML不是一种标记语言）的缩写。相比JSON格式的方便。...

教你如何解决最常见的58种网络故障排除方法

1.故障现象：网络适配器（网卡）设置与计算机资源有冲突。分析、排除：通过调整网卡资源中的IRQ和I/O值来避开与计算机其它资源的冲突。有些情况还需要通过设置主板的跳线来调整与其它资源的冲突。2.故障现...

一分钟带你了解服务器网卡（服务器网卡怎么用）

今天小编和大家聊一下服务器的网卡。什么是网卡？简单说网卡就是计算机与局域网互连的设备。计算机主要通过网卡接入网络。网卡又称为网络适配器或网络接口卡NIC（NetworkinterfaceCard）...

linux文件之ssh配置文件的含义与作用

ssh远程登录命令是操作系统(包括linux和window系统)下常用的操作命令，可以帮助用户，远程登录服务器系统，查看，操作系统相关信息。linux系统对于ssh命令有专门保存其相关配置的目录和文件...

Cilium 官方文档翻译 - IPAM(二)Kubernetes Host模式

KubernetesHostScopeciliumIPAM的kuberneteshost-scope模式通过选项ipam:kubernetes开启，将集群IP地址分配委托给每个独立的节点，并...

域名劫持跳转，域名劫持跳转的解决办法只需5步

简单来说，域名劫持就是把原本准备访问某网站的用户，在不知不觉中，劫持到仿冒的网站上，例如用户准备访问某家知名品牌的网上商店，黑客就可以通过域名劫持的手段，把其带到假的网上商店，同时收集用户的ID信息和...

Linux基本命令（linux基本命令总结）

...

Linux 磁盘和文件系统管理（linux磁盘管理fdisk）

1检测并确认新硬盘...

windows host文件怎么恢复?局域网访问全靠这些!

windowshost文件怎么恢复？windowshost文件是常用网址域名及其相应IP地址建立一个关联文件，通过这个host文件配置域名和IP的映射关系，以提高域名解析的速度，方便局域网用户使用...

Nginx配置文件详解与优化建议（nginx 配置详解）

1、概述今天来详解一下Nginx的配置文件，以及给出一些配置建议，希望能对大家有所帮助。...

Mac电脑hosts文件锁定，如何修改hosts文件权限

有时候我们需要修改hosts文件，但是网上很多教程都行不通，使用sudo命令也不行。其实有一个很简单的方法。打开终端命令行，使用如下命令即可：sudochflags-hvnoschg/etc/...

windows电脑如何修改hosts文件?（windows 修改hosts文件）

先来简单说下电脑host的作用hosts文件的作用：hosts文件是一个用于储存计算机网络中各节点信息的计算机文件；作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中...

Vigilante恶意软件行为怪异:修改Hosts文件以阻止受害者访问盗版网站

Sophos刚刚报道了一款名叫Vigilante的恶意软件，但其行为却让许多受害者感到不解。与其它专注于偷密码、搞破坏、或勒索赎金的恶意软件不同，Vigilante会通过修改Hosts文件...

hosts文件无法修改几种现象和解决方法

第一种、hosts文件修改完不是直接保存而是弹出另存为窗口解决：1、右击hosts文件——属性——把“只读”前面勾去掉。第二种、打开hosts文件时提示“你没有权限打开该文件，请向文件的所有者或管理员...

hosts文件位置在哪里,教你hosts文件位置在哪里

Hosts是一个没有扩展名的系统文件，其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的I...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表