Sass学习笔记

Posted 2021-09-13 y_lucky

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