原文链接：SCSS之基础全解

1.嵌套选择器

例子1：

body {
  p {
    color: red;
    &:hover {
      color: green;
    }
  }
}

编译后为:

body p {
  color: red;
}
body p:hover {
  color: green;
}

例子2：

body {
  p {
    font: {
      size: 34px;
      family: "Courier";
      weight: bold;
    }
  }
}

编译后为:

body p {
  font-size: 34px;
  font-family: "Courier";
  font-weight: bold;
}

2.变量

变量的类型有六种:

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

$red: red;
$g: green;

body {
  p {
    color: $red;
    &:hover {
      color: $g;
    }
  }
}

编译后为:

body p {
  color: red;
}
body p:hover {
  color: green;
}

数值计算:

width: 100px + 100px + 100px; //加法
width: 100px - 100px + 100px; //减法
width: 100px * 100 //乘法,注scss的乘法和除法是带单位的
width: (100px/3)  //注意这里需要带括号,如果不带括号会当场分割数子
width: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
width: 100 % 3px //SCSS也支持取模运算

颜色计算：

$red:#ff0000;
p{
   color : $red + #888; //#ff8888
}
div{
  color :$red + #111;  //#ff1111
}

字符串插值:

body {
  p {
    $content: "---";
    &:before {
      content: "[#{$content}";
    }

    &:after {
      content: "#{$content}]";
    }
  }
}

3.mixin

@mixin mix {
  border: 1px solid red;
}

body {
  p {
    @include mix;
    color: red;
    &:hover {
      color: green;
    }
  }
}

其中mixin还可以定义为函数,还可以传递参数

@mixin mix($width) {
  border: $width solid red;
}

body {
  p {
    @include mix(2px);
    color: red;
    &:hover {
      color: green;
      @include mix(6px);
    }
  }
}

编译后:

body p {
  border: 2px solid red;
  color: red;
}
body p:hover {
  color: green;
  border: 6px solid red;
}

4.placeholder

%mix {
  border: 1px solid red;
}

body {
  p {
    @extend %mix;
    color: red;
    &:hover {
      color: green;
      @extend %mix;
    }
  }
}

编译后:

body p:hover, body p {
  border: 1px solid red;
}

body p {
  color: red;
}
body p:hover {
  color: green;
}