Scss语法

CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

变量 $

$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;

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

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

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

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

运算

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

p {
    font: 10px/8px;             // 10px/8px;
    $ 1000px;
     $width/2;            // 500px;
     round(1.5)/2;       // 算除法
    height: (500px/2);          // 250px;
    margin-left: 5px + 8px/2px; // 9px;
     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(5);
}