scss

嵌套规则

......

声明变量

// scss
$width: 50px;

.wt {
    width: $width;
}

数学运算

// scss
#id {
    width: (1 + 2) *3px;
    width: $width/2；
    margin-left: 5px + 8px/2px;
}

p {
  color: #001100 + #040506;   /* #041606 */
}

插值

// scss
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/* 插值内的计算，null为空字符串 */
$val: null;
p:before {
    content: ‘sting #{$val} str‘;   /*sting  str*/
}

指令

// scss
@import ‘style.scss‘;

// scss
.warp {
  @import ‘style.scss‘;
}

extend

// scss
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;   /* 只能继承选择器 */
  border-width: 3px;
}

// scss
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

mixin + include

/* 函数设置*/
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

/* 使用 */
p { 
    @include sexy-border(blue, 1in); 
     font-size: 14px;
}

/* 相当于 */
p {
    border-color: blue;
    border-width: 1in;
    border-style: dashed;
}

mixin 混合未知格式和数量的变量, 使用...

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

逻辑

if else 判断

// scss
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

for循环

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

/* 相当于 */
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

each循环

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
  }
}

/* 相当于 */
.puma-icon {
    background-image: url("/images/puma.png");
}
.sea-slug-icon {
    background-image: url("/images/sea-slug.png");
}
.egret-icon {
    background-image: url("/images/egret.png");
}
.salamander-icon {
    background-image: url("/images/salamander.png");
}

while 循环

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

/* 相当于 */
.item-6 {
    width: 12em;
}
.item-4 {
    width: 8em;
}
.item-2 {
    width: 4em;
}

创建自定义函数

$screen:750;
@function px2rem($px) {
    @return #{$px/($screen/10)}rem
}

原文：https://www.jianshu.com/p/3259976b414b