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/