对于 Sass 基本语法的使用总结 ：

这篇文章是对于 Sass 常用语法 使用的一个简单总结 ：

---

• Sass 概念 :

Sass : 是一种 CSS扩展语言，目前广泛地应用到 web 项目开发中，使用 sass 可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的 CSS 样式，可以说是样式中的“高级语言”。Sass 在日常的开发中，是需要通过转换工具转成 CSS 再引入到 HTML 文件中。

 

• Sass 的基本使用 : 

变量的使用 :

Sass 中的一个核心就是使用变量，变量的使用总结有以下几点：

1. 以 $ 开头声明变量;
2. 变量具有作用域的;
3. 变量中连接符中划线和下划线是互通的。

//=============================普通变量=========================
$error-color: red;
.test {
  color: $error-color;/*(或者: color:$error_color;)*/
}

//===============================默认变量=========================
$baseLineHeight: 1.5!default;
body{
    line-height:$baseLineHeight;
}
//覆盖默认变量只需在默认前增加新的定义即可
$baseLineHeight:  2;
$baseLineHeight:  1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//=============================特殊变量=============================
//（变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。）
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//===========================多值变量List:===========================

//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

//============================多值变量Map:============================
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }

//=========================全局变量(sass 3.4后的版本中正式应用)=========
$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;        
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}

样式嵌套 :

Sass 中的 嵌套 规则可以减少很多代码的书写，形式是在外层选择器中，嵌入其后代的选择器，例如：在 CSS 中的div p {}，在 sass 的形式是 div{ p {} }，最终 sass 编译出的css是 div p {}，在复杂的多层样式下，显然用 sass 会方便很多。

div{
    p{
    line-height: 24px;
        a{
          color: yellow;
        }
    }
    .content{
     background :red;
    }
}

这种嵌套的规则，也可以应用于 伪类，在 sass 用 “&” 指代了 外层的选择器 :

div{
    p{
    line-height: 24px;
        a{
          color: yellow;
          &:hover{
           color:blue;
          }
        }
    }
    .content{
     background :red;
    }
}

混入样式 :

混入样式 : 的关键字是 mixin 和 include，这是一个强大的功能，可以类似于函数一般复用代码并通过参数个性化；

//=======没有参数===========
@mixin box-border {
    border: 1px solid #ccc;
    border-radius: 4px;
}
.test {
    @include box-border; 
}

//=======使用参数===========
@mixin box-border($border-color: #ccc){
    border: 1px solid $border-color;
    border-radius: 4px;
}
.test {
    @include box-border(red); 
}

样式继承 :

样式继承 : 的关键字是 extend，使用继承可以把已写好的样式，给其它选择器复用;

@mixin box-border($border-color: #ccc) {
    border: 1px solid $border-color;
    border-radius: 4px;
}
.test-border {
    @include box-border(red); 
}
.test {
    @extend .test-border;
}

导入文件 :

导入文件 : 的关键字是 import，在 sass 中可以导入 sass 文件,也可以导入 css 文件，省略文件名时，默认导入sass文件;

/*css不会被合并在一个文件里*/
@import "reset.css"; 
/*scss导入时可以去掉后缀，会和导入文件合并在一个文件里*/
@import "a"; 

注释 : /* */ 会在 css 中生成注释 ; // 不会在 css 中生成注释。强制注释，会存在，一般用于版权等，/*! */

常用 list 列表函数 :

padding: 0 20px 10px 30px;/*这样的内容就是list*/
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

/*list函数*/
join($list1, $list2, [$separator]);/*：将两个列给连接在一起，变成一个列表；*/
append($list1, $val, [$separator]);/*：将某个值放在列表的最后；*/

自定义函数 :

$color:(light:#fff, dark:#000);/*定义一个map值*/
@function double($key) {
    @return map-get($color, $key);
}
.b {
    background: double(light);/*=> background:#fff,调用函数*/
}
@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}