Sass (英文全称：Syntactically Awesome Stylesheets)-语法棒极的样式表！
官网文档：https://sass.bootcss.com/docu...
中文文档 https://www.sass.hk/

为什么应用 Sass?
  • css语法不够弱小，反复编写
  • css代码无奈复用
  • css代码保护不不便
  • sass新增款式复用机制
  • sass新增变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports)等等个性
Sass怎么运行?
  • 应用Sass预处理器能够把sass转化为css
Sass 的装置?

  • NPM 装置

    npm install -g sass

  • Windows 上装置

    choco install sass

  • Mac OS X (Homebrew)装置

    brew install sass/sass/sass
罕用Sass 的命令?

1.$变量申明及援用

$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected {  border: $highlight-border;}留神：变量名用中划线还是下划线分隔是一样的

2.嵌套

#content {  article {    h1 { color: #333 }    p {         margin-bottom: 1.4em;         border: {          style: solid;          width: 1px;          color: #ccc;        }     }    a {      color: blue;      &:hover { color: red }    }  }  aside { background-color: #EEE }  h1, h2, h3 {margin-bottom: .8em}  div {      ~ article { border-top: 1px dashed #ccc }      > section { background: #eee }      dl > {        dt { color: #333 }        dd { color: #555 }      }      nav + & { margin-top: 0 }    }}

3.导入

@import "themes/night-sky";