Declarações de Propriedade

Na Sass assim como na CSS, as declarações de propriedade definem como os elementos que correspondem um seletor são estilizados. Porém a Sass adiciona funcionalidades adicionais para torná-las mais fáceis de escrever e automatizar. Antes de mais, um valor da declaração pode ser qualquer expressão de SassScript, que será avaliada e incluída no resultado.

SCSS Syntax

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}

Sass Syntax

.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size * 0.5

CSS Output

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

InterpolaçãoInterpolação permalink

Um nome de propriedade pode incluir interpolação, o que torna possível gerar dinamicamente as propriedades quando necessário. Tu podes mesmo interpolar o nome da propriedade inteira!

SCSS Syntax

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

Sass Syntax

@mixin prefix($property, $value, $prefixes)
  @each $prefix in $prefixes
    -#{$prefix}-#{$property}: $value

  #{$property}: $value


.gray
  @include prefix(filter, grayscale(50%), moz webkit)

CSS Output

.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

EncaixamentoEncaixamento permalink

Muitas propriedades de CSS começam com o mesmo prefixo que agem como tipo de espaço de nome. Por exemplo, font-family, font-size, e font-weight todas começam com font-. A Sass torna isto mais fácil e menos redundante permitindo que as declarações de propriedade sejam encaixadas. Os nomes da propriedade externa são adicionados à interna, separados por um hífen:

SCSS Syntax

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

Sass Syntax

.enlarge
  font-size: 14px
  transition:
    property: font-size
    duration: 4s
    delay: 2s

  &:hover
    font-size: 36px

CSS Output

.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

Algumas destas propriedades de CSS têm versões abreviadas que usam o espaço de nome de acordo com nome da propriedade. Para estas, podes escrever ambos valor abreviado e as versões encaixadas mais explícitas:

SCSS Syntax

.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}

Sass Syntax

.info-page
  margin: auto
    bottom: 10px
    top: 2px

CSS Output

.info-page {
  margin: auto;
  margin-bottom: 10px;
  margin-top: 2px;
}

Declarações EscondidasDeclarações Escondidas permalink

Algumas vezes só queres que uma declaração de propriedade apareça por algum tempo. Se o valor de uma declaração for null ou sequência de caracteres sem aspas vazia, a Sass não compilará esta declaração para o CSS:

SCSS Syntax

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

Sass Syntax

$rounded-corners: false

.button
  border: 1px solid black
  border-radius: if($rounded-corners, 5px, null)

CSS Output

.button {
  border: 1px solid black;
}

Propriedades PersonalizadasPropriedades Personalizadas permalink

Compatibilidade (Sintaxe de SassScript):
Sass de Dart
✓
LibSass
since 3.5.0
Sass de Ruby
since 3.5.0

As versões mais antigas de LibSass e Sass de Ruby analisavam as declarações de propriedade personalizadas tal como qualquer outra declaração de propriedade, permitindo a gama completa de expressões de SassScript como valores. Mesmo quando usares estas versões, é recomendado que uses a interpolação para injetar os valores de SassScript para compatibilidade para a frente.

Consulte a página de mudança de rutura por mais detalhes.

As propriedades personalizadas de CSS, também conhecidas como variáveis de CSS, tem uma sintaxe de declaração invulgar: elas permitem praticamente qualquer texto valores das suas declarações. Além disto, estes valores são acessíveis ao JavaScript, então qualquer valor pode potencialmente ser relevante para o utilizador. Isto inclui valores que normalmente seriam analisados como SassScript.

Por causa disto, a Sass analisa as declarações de propriedade personalizada de maneira diferente de outras declarações de propriedade. Todas as fichas, incluindo aqueles que se parecem com a SassScript, são passadas para CSS como são. A única exceção é interpolação, que é a única maneira de injetar valores dinâmicos para uma propriedade personalizada.

SCSS Syntax

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

:root {
  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};

  // Muito embora isto se pareça com uma variável de Sass,
  // é CSS válida então não é avaliada.
  --consumed-by-js: $primary;
}

Sass Syntax

$primary: #81899b
$accent: #302e24
$warn: #dfa612

:root
  --primary: #{$primary}
  --accent: #{$accent}
  --warn: #{$warn}

  // Muito embora isto se pareça com uma variável de Sass,
  // é CSS válida então não é avaliada.
  --consumed-by-js: $primary

CSS Output

:root {
  --primary: #81899b;
  --accent: #302e24;
  --warn: #dfa612;
  --consumed-by-js: $primary;
}

⚠️ Atenção!

Infelizmente, interpolação remove as aspas das sequências de caracteres, o que a torna difícil usar sequências de caracteres com aspas como valores para propriedades personalizadas quando vêm das variáveis de Sass. Como uma maneira de dar a volta a isto, podes usar a função meta.inspect() para preservar as aspas:

SCSS Syntax

@use "sass:meta";

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;

:root {
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}

Sass Syntax

@use "sass:meta"

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas

:root
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)}
  --font-family-monospace: #{meta.inspect($font-family-monospace)}

CSS Output

:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}