继承(extend)
理解:
包含多个样式的‘变量’,一个正常使用的样式类,不管以后继不继承,都会被编译解析。
若单独为继承而写的样式类,本身不想被编译解析,可以使用占位符%来定义样式类。
解析时是将用了继承样式类的选择器复制到一起,复制的是选择器,而不是定义的样式类。
基本使用:
定义继承:
.box1 {
/* css 声明 */
}
使用继承:
.box2{
@extend .box1;
...
}
解析格式:
.box, .bo2{
/* css 声明 */
}
不被编译的继承
定义继承:
%box1 {
/* css 声明 */
}
使用继承:
.box2{
@extend %box1;
...
}
解析格式:
.bo2{
/* css 声明 */
}
局限一:作用域
@media指令中只能使用本指令内的继承源
写法一:
.box1{
width: 200px;
margin-right: 20px;
background-color: pink;
}
@media screen and (max-width: 300px){
.box1{
@extend .box1
}
写法二:
.box1{
width: 200px;
margin-right: 20px;
background-color: pink;
}
@media screen and (max-width: 300px){
.box1{
color: white;
}
.box2{
@extend .box1
}
}
// 报错:
DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
error test.scss (Line 5: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .box1" on line 19 of test.scss.
)
写法三
@media screen and (max-width: 300px){
.box1{
color: white;
}
.box2{
@extend .box1;
width: 200px;
}
}
正常编译
@media screen and (max-width: 300px) {
.box1, .box2 {
color: white; }
.box2 {
width: 200px; } }
局限二:继承源选择器规范
继承源的选择器不支持组合,尽量为单选择器,后代选择器( )和兄弟选择器(+)都不可以作为继承源,继承源解析后是一个名字的选择器,不要是谁的后代或者兄弟姐妹,不然解析后选择器会出现错误。下面是两个例子
// html
<div class="box1">
<div class="box2"></div>
</div>
<div class="div1">
<div class="div2"></div>
</div>
// scss 写法一
.box1 .box2{
width: 100px;
}
.div1 {
@extend .box2;
height:100px;
}
// 解析一
.box1 .box2, .box1 .div1 { // 出错 div1并不是box1的后代
width: 100px; }
.div1 {
height: 100px; }
// scss 写法二
.box1 .box2{
width: 100px;
}
.div1 .div2{
@extend .box2;
height:100px;
}
// 解析一
.box1 .box2, .box1 .div1 .div2, .div1 .box1 .div2 { // 出错
width: 100px; }
.div1 .div2 {
height: 100px; }