当前位置:首页>CSS>Sass>Sass语法

Sass语法

作者:微学网发布时间:2019-09-03 09:00:00

Sass 有两种语法格式,SCSS和Sass。

SCSS (Sassy CSS)

首先是 SCSS (Sassy CSS),也是本文示例所使用的格式。

这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。

此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

Sass

另一种也是最早的 Sass 语法格式,被称为缩进格式 (Indented Sass) 通常简称 “Sass“,是一种简化格式。

它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,很多人认为这样做比 SCSS 更容易阅读,书写也更快速。

缩进格式也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式。

这种格式以 .sass 作为拓展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用,或者通过 sass-convert 命令行工具转换成另一种格式。

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass和SCSS二选一

Sass支持两种不同的语法。每个人都可以导入另一个,因此您和您的团队可以选择哪一个。

SCSS

SCSS语法使用的文件扩展名.scss。有几个小的例外,它的超集CSS,这意味着基本上所有有效的CSS是有效SCSS 也。由于它与CSS的相似性,它是最容易习惯和最流行的语法。

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的原始语法,因此它使用文件扩展名.sass。由于这种扩展,它有时被称为“Sass”。缩进语法支持与SCSS相同的所有功能,但它使用缩进而是花括号和分号来描述文档的格式。

通常,只要您在CSSSCSS中编写花括号,就可以在缩进语法中更深入地缩进一级。一旦一行结束,就算作分号。在整个参考文献中注明的缩进语法中还有一些其他差异。

缩进语法如下所示:

@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