sass学习笔记4-7

4. 静默注释;

css注释：浏览网站源码可以看到/…/
sass静默注释：内容不会出现在生成的css文件中。//

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

实际上，css的标准注释格式/* … */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

5. 混合器;

5-3 mixin传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

为了避免不知道每个参数是什么意思，可以通过语法$name: value的形式指定每个参数的值，顺序就没有关系了，不漏掉参数就ok

5-4. 默认参数值;

为了在@include混合器时不必传入所有的参数，可以给参数指定一个默认值：使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

@include link-colors(red)
$hover和$visited也会被自动赋值为red。

6. 使用选择器继承来精简CSS;

一个选择器可以继承为另一个选择器定义的所有样式
//通过选择器继承继承样式

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

6-1. 何时使用继承;

混合器主要用于展示性样式的重用，而类名用于语义化样式的重用.因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。

6-2. 继承的高级用法;

名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现：

.disabled {
  color: gray;
  @extend a;
}

6-3，6－2也没很懂呢

6-4

7.小结

变量，嵌套，父选择器，导入，混合器。选择器继承