• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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 相同的所有特性,但是它使用缩进而不是花括号和分号来描述文档的格式。

    通常,在 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
    

    下篇:解析样式表