About
接着上次没写完的内容写，如果想快速上手并简单实用Sass的朋友可以把上一篇也看一下，传送门。
一、静默注释
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。即采用双斜线//注释。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
二、混合器
混合器使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。举个例子，当我们要做浏览器兼容的时候代码写起来很麻烦，因为CSS属性前面需要使用厂商前缀，如果我们每个组件内都一个个去写的话不仅代码难看还很累。
// style.scss
@mixin radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
// home.vue
@import 'style.scss';
.container {
@include radius
}
// 编译后
.container {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
1. 混合器使用需要注意的点
官方提示：
- 为你定义的混合器起一个语义化的类名
- 混合器中避免属性交叉，免得一个
CSS类中引入多个混合器导致代码重用
2. 在混合器中使用CSS规则
我们之前总是强调可以在混合器中使用CSS属性，但我感觉更好的是混合其中也可以使用CSS规则，例如：
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
// 编译为
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代&。
3. 给混合器传参
哇塞，这简直不要太棒了~~~这真的是我们能想到的都实现了呀，这样我们就可以写一些普适性的样式，然后在使用的时候根据情况传入相应的参数，例如：
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
//编译为：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
4. 给参数默认值
参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：
@mixin link-colors(
$normal: red,
$hover: $normal,
$visited: $normal
) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
三、选择继承器
使用选择继承器我们可以在组件中避免写重复的CSS，这样会使我们的代码更加精简。该语法通过@extend实现。
.error {
border: 1px solid red;
background-color: #fdd;
}
// 通过选择器继承继承样式
.seriousError {
@extend .error;
border-width: 3px;
// 编译为
.seriousError {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
}
总的来说就是在原生CSS中，我们仅可以使子节点继承父节点或者祖先节点的样式，并且只能继承可继承属性，但是如果使用Sass选择继承器，我们可以完成没有亲缘关系，以及所有属性的继承。
3.1 何时使用继承
根据我的理解，我认为一般会在两个DOM元素比较类似的时候使用继承，比如官网上提供的例子error和serious-error，两者可能都是一种错误弹窗，但是为了突出serious-error的不同，我们需要它具有一些不一样的属性，此时可能有人会想通过JavaScript去动态添加class or style，但是这可能会比较麻烦，因为肯定会涉及到一些状态判断之类的，难免会消耗一些性能，如果此时采用选择继承器，我们只需要在serious-error添加一些特有属性然后@extend .error就ok了~~。当然这可能只是一种场合，鉴于本人开发经验较少，不能很快想出更多的使用场合。还请读者盆友见谅。
另外，我们需要知道的是：
- 跟混合器相比，继承生成的
CSS代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的CSS体积更小。如果你非常关心你站点的速度，请牢记这一点。 - 继承遵从
CSS层叠的规则。当两个不同的CSS规则应用到同一个html元素上时，并且这两个不同的CSS规则对同一属性的修饰存在不同的值，CSS层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
3.2 继承的工作细节
这部分内容没有细读，因为没有具体编译代码，并不能使我完全理解作者的意图，就不写出来误导读者了，但我知道的是，继承并不是像混合器一样用样式代码替换@extend，有兴趣的朋友可以到官网上查看文档。
网友评论