Sass系列（三）：sass基本语法

1.变量

SASS允许使用变量，所有变量以$开头。

$btn-primary-color:#333;
.btn-primary{
  color:$btn-primary-color;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
.rounded {
  border-#{$side}-radius: 5px;
}

默认变量：

$fontsize:14px !default;

如果需要覆盖默认变量，只需在默认变量前面重新声明普通变量即可

$fontsize:16px;
$fontsize:14px !default;

sass变量还存在全局变量与局部变量，在选择器、函数、混合宏...的外面定义的变量为全局变量

2.计算功能

SASS允许在代码中使用算式：

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

可使用的运算符包括：+ - * / %

3.嵌套

3.1选择器嵌套

如下面的代码：

ul li{
  padding:11px 15px;
}

可以写成：

ul{
  li{
    padding:11px 15px;
  }
}

3.2属性嵌套

如下面的代码：

span{
  border-color:red;
  border-radius:5px;
}

可以写成：

span{
  border:{
    color:red;
    radius:5px;
  }
}

注意：border后面必须加上冒号；

3.3伪类嵌套

伪类嵌套需使用&符号，例如：

.border-1px{
  &:after{
    position:absolute;
    bottom:0;
    left:0;
    content:'';
    width:100%;
    height:1px;
    background-color:#333;
  }
}

4.sass注释

// 单行注释，只保留在sass源文件中，编译后被忽略
/*标准注释，会保留到编译后的文件*/
/*!
  重要注释，即使压缩版也会保留，通常可以用于声明版权信息。
*/

5.sass继承

继承使用 @extend

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

编译为：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

6.Mixin混合器

使用Mixin来定义可重用代码块，例如：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px); }

7.插入文件

@import命令，用来插入外部文件。

@import sass/base.scss;

如果插入的是css文件，则等同于css中的import

@import css/common.css