Scss语法

---

变量 $

$color0:#00a;           // 全局
.link{
    $color1:#a00;       // 局部
    $color2:#0a0 !global; // 转换成全局
    span{ color:$color; }
}

嵌套

ul{  
    li {}  
}

父选择器

.link{
    &:hover{} // == .link:hover
    body  & {} // == body .link
    &-bar{}   // == .link-bar
}

属性嵌套

.link{
    font:{  
        family:Airl; // == font-family
        size:12px; // == font-size
    }
}

占位符 %

%link{}
@extend %link;

运算

• • • / % < <= > >= == !=
      / 将被视为除法运算符号：
      如果值，或值的一部分，是变量或者函数的返回值
      如果值被圆括号包裹
      如果值是算数表达式的一部分

p {
    font: 10px/8px;             // 10px/8px;
    $width: 1000px;
    width: $width/2;            // 500px;
    width: round(1.5)/2;       // 算除法
    height: (500px/2);          // 250px;
    margin-left: 5px + 8px/2px; // 9px;
    width: calc(100% - .5rem)
}

需要用变量，又不让 / 做除法，使用#{}包裹

font:  #{ $b } / #{ $a }

$theme='default'
.page[data-theme= #{$theme}]{
    background-color:#f1f1f1;
}

插值语句 #{}

$name : foo
p.#{ $name } {}   // p.foo{}

import

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
#main {
  @import "example";
}

继承 extend

.err{}
.err2{
    @extend .err;
}

混合 @mixin

@mixin  style1 { 
    color:#a00; 
}
@mixin  style2($c:#00a, $size) { 
    color:$c; 
}
.page1{ 
    @include style1; 
}
.page2{ 
    @include style2(#00a,12px);
}

函数 @function

@function width($n){
    @return $n*2;
}
.box{
    width:width(5);
}