sass 简单概括

以下信息都是官网上的信息，都是我在学习的时候总结的一些注意事项：

1. 变量声明：与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此

2.变量引用：变量值也可以引用其他变量

3.变量名用中划线还是用下划线分隔：用中划线声明的变量可以使用下划线的方式引用，反之亦然

$link-color: blue;
a {
  color: $link_color;
}

4. 嵌套css规则  你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写 

4.1父选择器的标识符& ： 在为父级选择器添加：hover等伪类时用&  

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

 4.2群组选择器的嵌套：在CSS里边，选择器h1h2和h3会同时命中h1元素、h2元素和h3元素。与此类似，.button button会命中button元素和类名为.button的元素。这种选择器称为群组选择器 

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

对于内嵌在群组选择器内的嵌 套规则，处理方式也一样

nav, aside {
  a {color: blue}
}

 4.3子组合选择器和同层组合选择器：>、+、~     ： 可以把它们放在外层选择器后边，或里层选择器前边

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

 

sass会如你所愿地将这些嵌套规则一一解开组合在一起：

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 }

4.4属性嵌套： 嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中 

将border-style  border-width  border-color 嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：都是从“-” 那区分开了

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

5. 导入sass

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。举例来说，@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

 5.1 默认变量值：  一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量在你的scss文件中被声明赋值了，那就用你声明的值，如果没有那就用你引入的文件中的值。

5.2 嵌套导入 ： 它允许只在某一个选择器的范围内导入sass局部文件

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

被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。

5.3 原生css导入：你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了

6.静默注释：

// 这是单行注释语法，会输入到生成的css文件中。

/* 这是多行注释语法，会输入到生成的css文件中。 */

/* ! 多行重要注释，多行注释的扩展形式。在多行注释的基础上首行字符为 ! 标注为重要注释语句 */

7. 混合器：混合器使用@mixin标识符定义  通过@include来使用这个混合器，放在希望的任何地方

mixin.scss

使用：

7.1  混合器中的css规则：混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性

7.2 给混合器传参：混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。

 

也可以还用下边的样式引入

7.3 默认参数值：如果没有传参，

SASS代码

@mixin fourMixin ($width : 3000px) {
    width : $width;
}

div {
    @include fourMixin(20px);
}

span {
    @include fourMixin();
}

　　编译后的CSS代码

div {
  width: 20px;
}
 
span {
  width: 3000px;
}
8.使用选择器继承来精简CSS： @extend语法实现

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

8.1 何时使用继承：当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了；

• 你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办？使用sass时，我们提倡的就是不要做重复的工作。
• 你可以使用一个选择器组（比如说.error.seriousError）给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢？再这样做就困难多了。
• 你可以使用一个混合器为这两个类提供相同的样式，但当.error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的 样式。你应该更清晰地表达这种关系。
• 综上所述你应该使用@extend。让.seriousError从.error继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error.seriousError都会继承其中的样式。

8.2 继承的高级用法：

@extend有两个要点你应该知道。

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

8.3 使用继承的最佳实践：

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。但是如果你不小心，可能会让生成的css中包含大量的选择器复制。

避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控：

.foo .bar { @extend .baz; }
.bip .baz { a: b; }

7. 小结;（这部分为官网原文）

本文介绍了sass最基本部分,你可以轻松地使用sass编写清晰、无冗余、语义化的css。对于sass提供的工具你已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。

变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至sass的文件名，可以互换通用_和-。同样基础的是sass的嵌套机制。嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套。

你也已经学到了sass的另一个重要特性，样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让你的css变得更加可维护和语义化。最后，我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的css的整洁和可维护性。