浅析Scss基础语法和导入SASS文件的方法

本篇文章主要介绍最基础的使用和语法，可以看到，Scss引入的变量和嵌套，极大地方便了开发工作，结合其自带的插值表达式，使得css样式编写非常灵活！

Sass语法介绍

sass有两种语法格式Sass(早期的缩进格式：Indented Sass)和SCSS(Sassy CSS)

目前最常用的是SCSS，任何css文件将后缀改为scss，都可以直接使用Sassy CSS语法编写。

所有有效的 CSS 也同样都是有效的 SCSS。

使用变量

sass使用$符号来标识变量。

变量的作用就是，让你在整个样式表中保存并重用一些信息或数据。

比如存储颜色(color)、字体集，或任何你想重用的CSS值。

1. 变量声明

和css属性的声明（property declaration）很像！

如，声明值为 #F90 的变量 $highlight-color，字体集变量：

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;
 
body {
    font: 100% $font-stack;
    color: $highlight-color;
}

输出结果为：

body {
    font: 100% Helvetica, sans-serif;
    color: #F90;
}

变量有作用域，当变量定义在css规则块内，则该变量只能在此规则块内使用。

2. 变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，就可以使用变量。

css生成时，变量会被它们的值所替代。

$color:#A34554;

.box {
  width: 300px;
  height: 400px;
  &-left{
    width: 30%;
    color: $color;
  }
}

生成css为：

.box {
    width: 300px;
    height: 400px;
}
.box-left{
    width: 30%;
    color: #A34554;
}

声明变量时，变量的值也可以引用其他变量，如下 $highlight-border 变量中使用了 $highlight-color 变量：

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

//编译后

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

3. 变量名中的中横线(hyphen)和下划线(underscore)

sass的变量名可以使用中划线和下划线，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

也就是，变量名中的中横线和下划线没有区别，两者互通。

比如下面的示例，中横线的$link-color，可以通过下划线的$link_color引用。

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

//编译后

a {
  color: blue;
}

相对，使用中横线更普遍些！

嵌套（Nesting）

css中重复写选择器是非常恼人的。尤其是嵌套的html元素样式，如：

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

Scss的嵌套

Sass中，借助在规则块中嵌套子规则块，可以使重复选择器只写一遍，避免重复而且可读性更高。

比如上面的示例，借助scss嵌套：

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

scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。

父选择器的标识符&

通常，sass解析嵌套时，把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside），即生成后代选择器。

但是对于伪类:hover、对于多class名等情况，则不应该以”后代选择器”的方式连接，比如：

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

默认生成的article a :hover会让article元素内a链接的所有子元素在被hover时都会变成红色，显然是不正确的（应该应用到a自身）。

为此sass提供了一种特殊的选择器：父选择器&。它可以更好的控制嵌套规则！

只要是选择器可以放置的地方，就都可以在嵌套中同样使用&。

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

展开时，&被父选择器直接替换：

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

通过&可以在嵌套块内，实现在父选择器之前添加选择器（非常灵活）。

如：

#content aside {
  color: red;
  body.ie & { color: green }
}

群组选择器嵌套

css中，使用,分割的群组选择器可以同时应用样式在多个选择器上，如：

h1, h2 {
  margin: 0;
}

但是，如果想对一个特定的容器元素内的多个元素，使用群组选择器时，就会有很多重复性工作。

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

而，sass的嵌套特性，在解开一个内嵌的群组选择器时，会把每一个内嵌选择器正确的结合起来：

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

sass会组合成 .container h1、 .container h2、.container h3 三者的群组选择器：.container h1, .container h2, .container h3{ xxx }。

同样，群组选择器内的嵌套也会以这种方式解析：

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

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

这三种选择器必须和其他选择器配合使用。

/* 子组合选择器> */
article > section { border: 1px solid #ccc }

/* 相邻组合选择器+  选择 元素后紧跟的指定元素 */
header + p { font-size: 1.1em }

/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */
article ~ article { border-top: 1px dashed #ccc }

在sass中使用时，可以通过嵌套直接生成正确的结果（位于外层选择器的后面，或内层选择器的前面均可！），而不需要使用&。

article {
  /* 放在 里层选择器前边 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外层选择器后边 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  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 }

最后一句，nav + & 使用父选择器&后，原本默认的嵌套规则不再适用，而是直接应用 & 组合的结果。

属性嵌套

sass中，属性也可以进行嵌套！

把属性名从中划线-的地方断开，在该属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。这样就可以实现属性的嵌套。

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

编译生成如下：

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

结合属性的缩写形式，可以实现在嵌套属性中指明需要额外样式的特殊子属性。

nav {
  border: 1px solid #ccc {
    /* 单独设置的 子属性 */
     left: 0px;
     right: 0px;
  }
}

/* 生成后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

插值（Interpolation）

类似 es6 中的插值表达式，Sass也提供了插值计算的方式。

插值几乎可以用在任何地方，作为一个 SassScript 表达式的嵌入结果。

Sass的插值写法为：#{$variable_name}。

利用插值动态生成选择器、属性名和值

可以使用插值获取变量或函数调用到一个选择器、或属性值。

比如：

$bWidth:5px;
$style:"blue";

.nav {
    border: #{$bWidth} solid #ccc;
    &.nav-#{$style} {
        color: #{$style};
    }
}


// 编译为：
.nav {
  border: 5px solid #ccc;
}
.nav.nav-blue {
  color: blue;
}

属性名使用插值变量

使用插值的一个好处是，可以直接将变量值作为属性名使用。

如下，通过插值，属性名直接用变量来替代，这样就可以动态生成属性。

不使用插值，直接在属性的位置使用变量$property，将会被处理为对变量的赋值！

$value:grayscale(50%);
$property:filter;

.nav{
   #{$property}: $value;
}

// 编译为：
.nav {
   filter: grayscale(50%);
}

在 @mixin 中使用插值

@mixin 混合器将在下一节介绍。

插值在写mixin时非常有用，比如下面通过传递的参数创建选择器（来自官网）：

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", " ");

编译后的CSS为：

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: " ";
}

css的特殊函数（Special Functions