Regras de Estilo

As regras de estilo são os alicerces da Sass, tal como são para a CSS. E funcionam da mesma maneira: escolhes quais elementos estilizar com um seletor, e declaras propriedades que afetam a aparência destes elementos.

SCSS Syntax

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

Sass Syntax

.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

CSS Output

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

EncaixamentoEncaixamento permalink

Mas a Sass quer tornar a tua vida mais fácil. No lugar de repetir os mesmos seletores vezes sem conta, podes escrever um regra de estilo dentro de uma outra. A Sass combinará automaticamente o seletor da regra exterior com o da regra interior:

SCSS Syntax

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sass Syntax

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS Output

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

⚠️ Atenção!

As regras encaixadas são super úteis, mas também podem tornar difícil visualizar o quanto de CSS estás de fato a gerar. Quanto mais fundo encaixares, mais largura de banda custa para ser a tua CSS e mais trabalho custa para o navegador desenhá-la. Mantenha estes seletores pouco profundo!

Listas de SeletorListas de Seletor permalink

As regras encaixadas são inteligentes sobre o lidar com listas de seletor (que são, seletores separados por vírgula). Cada seletor complexo (aqueles entre as vírgulas) é encaixado separadamente, e depois são combinados de volta em uma lista de seletor:

SCSS Syntax

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

Sass Syntax

.alert, .warning
  ul, p
    margin-right: 0
    margin-left: 0
    padding-bottom: 0

CSS Output

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

Combinadores de SeletorCombinadores de Seletor permalink

Tu também podes encaixar seletores que usam combinadores. Tu podes colocar o combinador no final do seletor externo, no início do seletor interno, ou mesmo todos em si mesmo entre os dois:

SCSS Syntax

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

Sass Syntax

ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8

CSS Output

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

Encaixamento AvançadoEncaixamento Avançado permalink

Se quiseres fazer mais com as tuas regras de estilo encaixadas do que apenas combiná-las em ordem com o combinador descendente (que é, uma espaço simples) separando-os, a Sass tem a tua solução. Consulte a documentação de seletor de pai por mais detalhes.

InterpolaçãoInterpolação permalink

Tu podes usar interpolação para injetar valores a partir de expressões como variáveis e chamadas de função para os teus seletores. Isto é particularmente útil quando estás a escrever misturas, já que isto permite-te criar seletores a partir de parâmetros que os teus utilizadores passam:

SCSS Syntax

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");

Sass Syntax

@mixin define-emoji($name, $glyph)
  span.emoji-#{$name}
    font-family: IconFont
    font-variant: normal
    font-weight: normal
    content: $glyph



@include define-emoji("women-holding-hands", "👭")

CSS Output

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

💡 Fato Divertido:

A Sass apenas analisa os seletores depois da interpolação ser resolvida. Isto significa que podes seguramente usar a interpolação para gerar qualquer parte do seletor sem preocupares-te que não analisará.

Tu podes combinar a interpolação com o seletor pai &, a regra @at-root, e as funções de seletor para exercer algum poder sério quando geras dinamicamente os seletores. Para mais informações, consulte a documentação do seletor de pai.