关于css3:Sass学习笔记

46次阅读

共计 844 个字符，预计需要花费 3 分钟才能阅读完成。

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. 导入