SCSS

SASS官网，官网介绍的非常全面，下面是我对SASS的一些精简总结，方便随时查阅。

一、使用变量

• 变量声明、变量引用

$highlight-color: #f90

.selected{
    border: 1px solid $highlight-color;
}
// 编译后
/* .selected{
    border: 1px solid #f90;
} */

• 变量名用中划线或下划线分隔皆可。

　　　　即$highlight-color和$highlight_color皆可。变量声明中用中划线，变量引用中用下划线也可以如常引用。

二、嵌套CSS规则

• SCSS写法：（像俄罗斯套娃一样，层层嵌套）

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

• 父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

• 群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

编译后：

.container h1, .container h2, .container h3 { margin-bottom: .8em }

• 子选择器和同层组合选择器：>、+和~

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译后：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

• 属性嵌套

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

这比下边这种同等样式的写法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

三、导入SASS文件

使用@import规则导入，如：@import "colors"   (colors.scss的.scss后缀可以省略)

• 使用SASS部分文件：你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import"themes/night-sky";
• 默认变量值：一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
• 嵌套导入：这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方

.blue-theme {@import "blue-theme"}

• 原生的CSS导入：原始的css文件改名为.scss后缀，即可直接导入了。
•  静默注释：
  • 方式一：注释格式以//开头

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

• • 方式二：注释格式/* ... */，当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

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

五、混合器

作用：当需要大段大段的重用样式的代码，混合器即发挥了重要作用.

使用：混合器使用@mixin标识符定义,通过@include来使用这个混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

编译后：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

六、何时使用继承

• 何时使用混合器：

 

如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

 

• 混合器中的CSS规则：混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

• 给混合器传参

@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混合器时不必传入所有的参数，我们可以给参数指定一个默认值）

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

• 使用选择器继承：通过@extend语法实现

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}
.seriousError { @extend .error; border-width: 3px; }

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

• 继承的高级用法：最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。接下来的这段代码定义了一个名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现：

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

• 继承的工作细节：@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。
• 使用继承的最佳实践：避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控