sass

前提：先安裝ruby

sudo gem  install -g sass
sass -v
cd css
//scss -----css
sass --watch index.scss:index.css

---

sass規則

• [x] &:父級同級選擇器

<div class="header info">
    <div class="inner">
        看&的實用
    </div>
</div>

css:
.header{
    &.info{
        .inner{
            color: yellow;
        }
    }
}

• [x] 結果文字爲黃色
• 須要注意的是，要本身用命令行編譯sass爲css

---

• [x] @extend:繼承

<p>測試@extend</p>
 
 css樣式
 .bgdred{
    background: red;
}
p{
    @extend .bgdred;
}

• [x] 測試結果：背景色爲紅色

---

變量必需要使用$n開始，例如：$n,$var

---

使用@mixin命令，定義一個代碼塊。

@mixin round1($vert,$horz,$radius:10px){
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}:$radius;
    -webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.border{@include round1(top,left,35px);
    width: 100px;
    height: 100px;
    background: yellow;
    /*border-width: 2px;
    border-color: pink;
    border-style: solid;*/
}

• [x] 測試結果：背景色爲紅

http://www.ruanyifeng.com/blog/2012/06/sass.html
https://note.youdao.com/web/#/file/WEB737a92d82a8c49ad17b36a57b502b73b/note/WEB5e9eca45ee44abb79073ff3f74ea1e3e/