每日美图
介绍
本章内容需要读者有一些面向对象的基本概念，如面向对象的继承，可以直接点击进入百度百科进行查看。
前文回顾
我们在“Sass介绍”一章的总结中写到Sass的特性
3.兼容CSS3语言，在 CSS 基础上增加 嵌套 (nesting)、变量、混合指令 (mixins) 、内置函数指令(inner function)、Sass拓展（自定义函数、存储缓存、自定义导入）
我们接下来对sass的学习也会依次从嵌套、变量、混合、内置函数 Sass拓展 展开，中间各部分会有少许内容结合学习，不过不会很多，不要紧张呀。
Sass的嵌套扩展
CSS选择器嵌套
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器
@charset "UTF-8";
#main{
background-color:aliceblue;
.subclass{
border:1rem aquamarine solid;
}
}
编译后的文件为
#main {
background-color:aliceblue;
}
#main .subclass {
border:1rem aquamarine solid;
}
可以验证.subclass 选择器 因嵌套在 #main 选择器内部，所以.subclass 编译后作为#main的内部选择。
CSS父选择器的嵌套引用
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器
@charset "UTF-8";
#main{
background-color:aquamarine;
&:hover {
background-color:coral;
}
}
编译后为
#main {
background-color:aquamarine;
}
#main:hover {
background-color:coral;
}
/*# sourceMappingURL=referenceFatherSelector.css.map */
可以发现&符号被替换为了外部选择器，用于在内部引用该符号的样式所在的选择器。
CSS样式继承嵌套
Sass 允许将一套 CSS 样式继承进另一套样式中，进行复用
@charset "UTF-8";
.pop {
font-family:仿宋;
}
.pop .bg{
background-color:azure;
}
.alert-pop {
@extend .pop;
color:red;
}
编译后为
@charset "UTF-8";
.pop, .alert-pop {
font-family:仿宋;
}
.pop .bg, .alert-pop .bg {
background-color:azure;
}
.alert-pop {
color:red;
}
/*# sourceMappingURL=extendsCss.css.map */
我们使用了“@extend"实现了样式的继承，@extend是Sass的一个指令，此指令的功能就是实现样式的复用。
发现可以继承样式的是因为在.pop选择器的样式处，添加了同等的.alert-pop样式选择器，同时保留.alert-pop自己的样式,即
.pop 变为 .pop,.alert-pop
.pop .bg 变为 .pop .bg,.alert-pop .bg
CSS样式属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。
这个就比较简单了如font属性或者background属性等
@charset "UTF-8";
#main{
font: {
family:新宋体;
size:0.2rem;
}
background: {
color:aquamarine;
repeat:no-repeat ;
image:url("http://baidu.com");
};
}
编译后为
@charset "UTF-8";
#main {
font-family:新宋体;
font-size:0.2rem;
background-color:aquamarine;
background-repeat:no-repeat;
background-image:url("http://baidu.com");
}
/*# sourceMappingURL=extendsFields.css.map */
总结
1.CSS样式分为三个层次 选择器->样式->样式属性 ；
2.sass作为一门高级的脚本语言具备高级语言的可复用高扩展的特性，相比较于CSS具体体现在各层次的复用与扩展；
3.针对CSS样式的三个层次进行了不同的复用 选择器的复用、样式的复用、相同命令空间样式属性的复用；
4.选择器的复用 又包括 选择器的嵌套复用 即内部选择器可以直接嵌套在外部选择器内部 ，使用 &引用当前&符号所在样式的选择器；
5.样式的复用 使用的是 @extend 指令。
网友评论