Sass(Scss) 学习笔记（一）--- 变量和嵌套

一、概念

​ Sass（Syntactically Awesome StyleSheets）是 CSS的一款预处理器，能完全兼容CSS3的语法，在CSS 语法的基础上增加了变量的、混合、导入等概念，利用嵌套语法的方式，大大减少了 CSS 重复代码的书写，提高项目的开发效率。

​ Sass有两种语法格式：Sass 和 Scss，其中Scss（Sassy CSS）是在CSS3的基础上进行扩展，加入一些Sass特有的功能，所有的CSS3语法都可以使用，而且支持浏览器前缀写法，扩展名为.scss，是本文所讲述语法，也是目前比较主流的一种语法。 第二种 Sass 语法，是最早期的语法格式，被称为缩进格式，扩展名为.sass，目前我还没有去接触，所以暂时不做讨论。但两种语法之间任何一种格式都可以通过 @import 导入到另一种格式中使用。

​ CSS 的常见预处理器除了Sass之外还有 Less 和 Stylus 。

二、变量

​ Sass 一个重要的特性就是为 css 引入了变量的概念，我们可以把一个经常使用的属性值定义成一个变量，然后再要使用的地方通过变量名来引用它，就无需多次书写，而且方便修改，只需要在变量声明的地方修改值，即可修改所有引用地方的属性值。

1、变量声明

​ sass通过 $ 符号来声明变量，格式类似于css属性：

$box-color: #000;

​ 声明的变量可以是一个值，也可以是多个值：

$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans";

可以通过:default设置变量默认值，在 Sass 中，!default是一个用于变量赋值的特殊标志。它的作用是，只有当该变量未被赋值（即它还没有值）时，才会使用 !default 指定的值。

/* 	前面未给变量赋过值 */
$primary-color: blue !default;
.text {
  color: $primary-color;
}
/* 编译后 */
.text {
  color: blue;
}

如果先给变量赋值了，那么 !default 就不会改变它的值：

/* 给变量赋值 */
$primary-color: red;
 /* 其他代码。。。。 */
/* 	前面给变量赋过值了 此处不会修改变量值 */
$primary-color: blue !default;
.text {
 color: $primary-color;
}
/* 编译后 */
.text {
 color: red;
}

在 Sass 中，!default 标志的主要用途是用于创建可配置的 Sass 样式库。这样的样式库通常为其变量提供一组默认值，但允许用户在引入样式库之前覆盖这些值。

​还有一点要注意：sass 中声明的变量是有作用域概念的，如果一个变量定义在一个css的规则块内，也就是 {...} 内，那么该变量就只能在该规则块内使用，在该规则块之外是无法引用的。如果定义的变量不在任何一个规则块内，那么这个变量就是一个全局变量，可以在此样式表任何一个规则块内引用。但也可以通过!global 将局部变量转换为全局变量

// 全局变量
$nav-color: #F90;
nav {
  $width: 100px; // 只能在规则块内使用的局部变量 
  $height: 500px !global; // 将局部变量转换为全局变量
  width: $width;
  color: $nav-color;
}
header {
height: $height;

​ 变量名要求： 在sass中变量名与css的属性名相同，可以包含中划线和下划线，两者效果等同，$link-color和$link_color其实指向的是同一个变量：

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

//编译后
a {
  color: blue;
}

2、变量引用

​ 当我们使用 $ 定义了一个变量之后，我们就需要在合适的地方引用它了，引用时，我们只需要在对应的位置以 $ + 变量名 的形式引用即可。

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

//编译后
.selected {
  border: 1px solid #F90;
}

​ 我们在声明一个新变量的时候，可以同时引用其他变量：

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

//编译后
.selected {
  border: 1px solid #F90;
}

	我们也可以通过 #{...} 插值语句在选择器和属性名中使用定义好的变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/* 编译后*/
p.foo {
  border-color: blue; 
}

三、CSS嵌套规则

​ Sass 的第二个重要特性是：CSS嵌套。以嵌套的形式表示选择器的父子关系，可以大大的减少选择器的重复书写，而且使代码的可读性更好。Sass 在编译成CSS时，会按照规则，将嵌套关系进行转换成css规则，简单来说就是，像打开俄罗斯套娃那样把里边的嵌套规则块一层层的打开，然后一层层的拼接，直到规则块结束。

1、普通嵌套

​ 普通嵌套表示的是后代关系，就是在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）。这种在CSS里边被称为后代选择器：

/* 1. Sass 代码 */
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

/* 编译后的CSS代码*/
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

/*2.Sass 代码*/
#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
/* 编译后代码*/
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

2、 & 嵌套

​ 正常情况下，嵌套关系会被编译成后代选择器，嵌套关系的父子元素之间，用空格连接。如果我们想要对嵌套关系中的父元素本身进行操作，比如:hover 等，那此时我们就需要借助标识符 & 了，该标识符表示父元素本身，在将嵌套关系进行转换时，父子元素之间不会添加空格：

/* Sass 代码*/
article a {
  color: blue;
  &:hover { color: red }
}

/*编译后的css代码*/
article a { color: blue }
article a:hover { color: red }

3、并集嵌套

​ 利用嵌套的方式来实现并集选择，也可以减少代码量，但是要注意该方式的准确使用，因为用sass实现并集选择，虽然看上去很小，但可能生成的css却很大，影响网页加载：

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

nav, aside {
  a {color: blue}
}

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

nav a,
aside a {color: blue}

4、子级和同级嵌套

​ sass为我们提供了特定的标识符来表示子级选择器和同级选择器。> 来选择直接子级符合条件的元素 ，+ 来选择同级相邻符合条件的元素，~ 来选择同级所有符合条件的元素：

/* Sass */
article {
    /* 选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素*/
  ~ article { border-top: 1px dashed #ccc }
    /* 选择器只会选择article下紧跟着的子元素中命中section选择器的元素 */
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
    /* 选择 nav 后面紧跟的 article 元素 */
  nav + & { margin-top: 0 }
}

/* css */
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 }

5、属性嵌套

​ 在sass中，除了CSS选择器，属性也可以进行嵌套。可以将同一类属性的值进行嵌套简写，规则如下：把属性名从中划线 - 的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样。

/* sass */
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
/* css */
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

​