Sass上篇

1、Sass简单介绍

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为 它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名scss，在Sass3之后的版本都支持这种语法规则。本文主要介绍scss

---

2、变量声明

• sass用$定义变量，变量可以定义在css规则之外也可以定在css规则之内，就像js中的全局变量与局部变量
• sass变量名称可以用中划线也可以用下滑线，中划线定义的变量可以用下滑线来引用，反之亦然

$basic-border: 1px solid black;
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica; 
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

  /* 编译后 */

nav {
  width: 100px;
  color: #F90;
}

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

  /* 编译后 */

.selected {
  border: 1px solid #F90;
}

---

3、嵌套CSS 规则

Sass的嵌套规则与css的嵌套规则很相似

后代选择器

#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 }

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}
 /* 编译后 */
 #content { background-color: #f5f5f5 }
 #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 }

nav, aside {
  a {color: blue}/*群组选择器+后代选择器*/
}
/* 编译后 */
nav a, aside a {color: blue}

• '>':表示直接子类
• '+':只会选择第一个相邻的匹配元素
• '~':匹配所有在元素之后的同级元素

---

4、导入sass文件

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

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

Sass导入规则

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件,

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";

---