SASS 兼容性没有Stylus强，而且老报错，已转向Stylus

安装sass

npm(General)

npm install -g sass

JavaScript 实现，运行的速度比其它微慢。

Chocolatey(windows)

choco install sass

Homebrew(macOS)

brew install sass/sass/sass

编译

监听自动编译

用 –watch 参数来监视单个文件或目录。每次保存 Sass 文件时重新编译为 CSS。

sass --watch input.scss output.css

可以使用文件夹路径作为输入和输出， 并使用冒号分隔它们，来监听文件并输出到目录。 Sass 将会监听 app/sass 目录下所有文件的变动，并 编译 CSS 到 public/stylesheets 目录下。

sass --watch app/sass:public/stylesheets

手动编译

sass input.scss output.css

书写

基本结构和嵌套

nav
  ul
    margin: 0
    list-style: none

  li
    display: inline-block

  a
    text-decoration: none

变量

$color-black: #000
$border-dark: rgba($color-black, 0.88)

body
  color: $color-black
  border: 1px solid $border-dark

引入文件

无需后缀，直接写文件名，如果有不在同一目录需要加上目录

@use 'base'

Mixins(化繁为简)

针对浏览器内核简化书写的举例

SASS

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Extend/Inheritance(扩展继承？)

SASS

/* 编译时会智能整合？ */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// 没有被使用所以编译会忽略.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green

CSS

/* This CSS will print because %message-shared is extended. */
.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

操作符(运算)

Sass 支持一些标准的数学运算符，如 +、-、*、/ 和 %。

以下案例简单的流式网格，以 960px 作为基准。利用 Sass 中的操作符 像素值转换为百分比的操作

SASS

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

更多资料

• SASS中文网