Sintaxe

SCSSSCSS permalink

A sintaxe de SCSS usa a extensão de ficheiro .scss. Com algumas poucas exceções, é um superconjunto de CSS, o que significa que essencialmente toda CSS válida também é uma SCSS válida. Por causa da sua semelhança com a CSS, é a sintaxe mais fácil de habituar-se e a mais popular.

A SCSS parece-se com isto:

@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;
  }
}

A Sintaxe IndentadaA Sintaxe Indentada permalink

A sintaxe indentada foi a sintaxe original da Sass, e usa a extensão de ficheiro .sass. Por causa desta extensão, algumas vezes é apenas chamada de “Sass”. A sintaxe indentada suporta todas as mesmas funcionalidades que a SCSS suporta, porém usa a indentação ao invés de chavetas e pontos e vírgulas para descrever o formato do documento.

Em geral, em qualquer altura que escreveres chavetas na CSS ou SCSS, podes apenas indentar um nível de profundidade na sintaxe indentada. E em qualquer altura que uma linha terminar, isto conta como um ponto e vírgula. Existem também algumas diferenças adicionais na sintaxe indentada que são enfatizadas ao longo da referência.

A sintaxe indentada parece-se com isto:

@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