前提：先安装ruby

sudo gem  install -g sasssass -vcd css//scss -----csssass --watch index.scss:index.css

---

sass规则

• [x] &:父级同级选择器

    
    
     
              看&的实用    
     
    
css:.header{    &.info{        .inner{            color: yellow;        }    }}

• [x] 结果文字为黄色
• 需要注意的是，要自己用命令行编译sass为css

---

• [x] @extend:继承

测试@extend
  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/