关于css3:Sass学习笔记

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