Sass 延伸
Posted 书和咖啡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Sass 延伸相关的知识，希望对你有一定的参考价值。
本节我们学习 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 选择器中的样式。
以上是关于Sass 延伸的主要内容，如果未能解决你的问题，请参考以下文章