特色

  • 完全兼容 CSS3
  • 在 CSS 语言的基础上增加变量(variables)、嵌套 (nesting)、混合 (mixins)，导入 等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供 控制指令等高级功能

语法格式

SCSS
  • 这种格式仅在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件
  • SCSS 也支持大多数 CSS hacks 写法 以及浏览器专属前缀语法
  • 这种语法的样式表文件需要以 .scss 作为拓展名
@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}
SASS
  • 是最早的语法，被称为缩进语法 (Indented Sass)，或者通常说的 "Sass"
  • 它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速
  • 使用此种语法的样式表文件需要以 .sass 作为扩展名
@mixin button-base()
@include typography(button)
@include ripple-surface
@include ripple-radius-bounded

display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle

&:hover
  cursor: pointer

&:disabled
  color: $mdc-button-disabled-ink-color
  cursor: default
  pointer-events: none
相互转换
$ sass-convert style.sass style.scss // # Convert Sass to SCSS
$ sass-convert style.scss style.sass // # Convert SCSS to Sass

文档

中文文档
英文文档