SASS相关

// 冒号前面是scss路径，后面需要生成的css路径
sass ---wath stylescss:stylecss--style compressed 

    $color: #333;
    $btn-bg: #ccc;
    $btn-bg: #e5e5e5 !default; //多用于组件化开发,重新定义变量即覆盖

    .btn { border: 1px solid $color; background: $btn-bg; }

    变量作用域类似js (选择器、函数、混合宏...的内部定义的变量为全局变量))

nav {
  ul {
    header & {
      color: blue;
    }
  }
  li {
    &:hover {
      font-size: 100px;
    }
    &::before ,
    &::after {
      content: '';
      display: table;
    }
    &::after{
      clear: both;
      overflow: hidden;
    }
    a {
      display: block;
    }
    &.open a {
      display: inline-block;
    }
  }
}

    border: {
        top: {
            color: #ccc;
            width: 1px;
        }
   }

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

@mixin border-radius($radius:5px){ //可设置默认值
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

a.btn { height: 30px; }
.btn-big { @extend .btn; color: #ccc; }

//编译后生成
a.btn, a.btn-big { height: 30px; }
.btn-big { color: #ccc; }

div%h { height: 30px; }
.btn { @extend %h; }
.btn-big { @extend %h; color: #ccc; }

//编译后生成
div.btn, div.btn-big { height: 30px; }
.btn-big { color: #ccc; }

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
2. 如果数值被圆括号包围。
3. 如果数值是另一个数学表达式的一部分。

if else：
    @if 条件 {} @else if 条件 {} @else {}
    判断符：!=  ==  >  <  >=  <=
    逻辑：or  and
for/while：
    @for $i from 1 through 3 {} //1~3
    @for $i from 1 to 3 {} //1~2

    $i: 4;
    @while $i > 0 { $i: $i - 1; }

each：
    $list: a b c;
    @each $item in $list {}

length($list)    //num --- 取列表长度
index($list, $item)    //num|false --- 取元素索引
nth($list, n)    //el --- 按索引取元素，n大于length时报错

join($list1, $list2, auto|space|comma)    //$newList --- 将两个列表合成一个列表
join( (1 2), (3,4) )    //1 2 3 4
join( (1,2), (3 4) )    //1,2,3,4
join(1, (2 3) )    //1 2 3
join(1, (2,3) )    //1,2,3
join(1,2)    //1 2

append($list, $add, auto|space|comma) //$newList--- 将一个元素添加到列表
zip(1px 2px 3px, solid dashed dotted, #333 #666 #999) //--- 转成多维列表

type-of(el)    //number|string|bool|color --- 返回数据类型
unit(number)    //--- 取数值的单位, 乘除可获得两个单位
unitless(number)    //true|false--- 是否不带单位
comparable(number1, number2)    //true|false --- 是否可运算
if($condition, $if-true, $if-false)    //三元运算

$theme-color: (
        default:(
                bgcolor: #fff,
                text-color: #444,
                link-color:#39f
        ),
        primary:(
                bgcolor:#000,
                text-color:#fff,
                link-color: #93f,
        ),
        negative:(
                bgcolor: #f36,
                text-color:#fefefe,
                link-color: #d4e
        )
);

map-get($map, key)    //--- 取出，没有则返回null
map-has-key($map, key)    //true|false --- 判断$map中是否有指定key值
map-keys($map)    //--- 返回keys列表（逗号分隔）
map-values($map)    //--- 返回values列表（逗号分隔）
map-merge($map1, $map2)    //$newMap ---
map-remove($map, key)    //删除指定key返回新map（不能删除map中的map)
keywords($args)    //--- 根据宏的参数动态创建map（自动去除参数中的$符号）

rgba(#f00, 0.6)    //--- 将颜色转成rgba
red(#f00)    //255 --- 取出R
green(#f00)    //0 --- 取出G
blue(#f00)    //0 --- 取出B
mix($color-1, $color-2, 50%)    //颜色混合

adjust-hue(-deg|-%)    //调整色相
saturate(#ccc, 30%)    //增加饱和度
desaturate(#f00, 80%)    //降低饱和度
lighten(#000, 30%)    //提高明度
darken(#fff, 30%)    //降低明度
grayscale(#f00)    //转成无彩系，等同于desaturate(#f00, 100%)

alpha($color) | opacity($color)    //--- 取出A
fade-in($color, .2) | opacify($color, .2)    //--- 与原值进行加法运算
fade-out($color, .2) | transparentize($color, .2)    //--- 与原值进行减法运算

@import "include/foo.scss|include/foo", "...", "...";
@import "include/";

//冒泡
        .sidebar {
            @media screen {
                width: 300px;
            }
            @media screen and (orientation: landscape) {
                width: 500px;
            }
        }

//嵌套

        @media screen {
            .sidebar {
                width: 300px;
                @media (orientation: landscape) {
                    width: 500px;
                }
            }
        }
//使用插值
        @media #{$media} and ($feature: $value) { }

//继承的位置点
.header a.btn:hover i.red { }
span { @extend i.red; }    //.header a.btn:hover span

.header a.btn:hover %child { }
span { @extend %child; }    //.header a.btn:hover span

    .a {
        height: 20px;
        @at-root .d {
            height: 30px;
        }
    }