Estrutura duma Folha de Estilo

Tal como na CSS, a maioria das folhas de estilos da Sass são principalmente compostas por regras de estilo que contém declarações de propriedade. Mas as folhas de estilos de Sass têm muito mais funcionalidades que podem existir junto destes.

DeclaraçõesDeclarações permalink

Um folha de estilo de Sass é composta por uma série de declarações, que são avaliadas em ordem para construir a CSS resultante. Algumas declarações podem ter blocos, definidos usando { e }, que contém outras declarações. Por exemplo, uma regra de estilo é uma declaração com um bloco. Este bloco contém outras declarações, tais como declarações de propriedade.

Na SCSS, as declarações são separadas por pontos e vírgulas (que são opcionais se a declaração usar um bloco). Na sintaxe indentada, são apenas separados por novas linhas.

Declarações UniversaisDeclarações Universais permalink

Estes tipos de declarações podem ser usadas em qualquer parte numa folha de estilo de Sass:

Declarações de CSSDeclarações de CSS permalink

Estas declarações produzem CSS. Elas podem ser usadas em qualquer parte exceto dentro numa @function:

Declarações de Alto NívelDeclarações de Alto Nível permalink

Estas declarações apenas podem ser usadas no início duma folha de estilo, ou encaixadas dentro numa declaração de CSS no início:

Outras DeclaraçõesOutras Declarações permalink

  • Definições de propriedade como width: 100px apenas podem ser usadas dentro de regras de estilo e algumas regras que usam arroba de CSS.

  • A regra @extend apenas pode ser usada dentro das folhas de estilo.

ExpressõesExpressões permalink

Uma expressão é qualquer coisa que fica no lado direito duma propriedade ou declaração de variável. Cada expressão produz um valor. Qualquer valor de propriedade de CSS válido também é uma expressão de Sass, mas expressões de Sass são muito mais poderosas do que valores de CSS simples. São passadas como argumentos para misturas e funções, usada pelo controlo de fluxo com a regra @if, e manipuladas usando aritmética. Nós chamamos a sintaxe de expressão da Sass de SassScript.

LiteraisLiterais permalink

As expressões mais simples apenas representam valores estáticos:

  • Números, que podem ou não ter unidades, como 12 ou 100px.

  • Sequências de Caracteres, que podem ou não ter aspas, como "Helvetica Neue" ou bold.

  • Cores, que podem ser referenciadas pelas suas representações hexadecimal ou pelo nome, como #c6538c ou blue.

  • O literais de booleano true ou false.

  • O null.

  • Listas de valores, que podem ser separados por espaços ou vírgulas e que podem ser cercadas ou não em parênteses retos, como 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, ou [col1-start].

  • Mapas que associam valores com chaves, como ("background": red, "foreground": pink).

OperaçõesOperações permalink

A Sass define a sintaxe para um número de operações:

  • == e != são usados para verificar se dois valores iguais.

  • +, -, *, /, e % têm seus habituais significado matemáticos para números, com comportamentos especiais para unidades que condizem com o uso de unidades na matemática científica.

  • <, <=, >, e >= verificam se dois números maiores ou menores que um ou outro.

  • and, or, e not têm o habitual comportamento booleano. A Sass considera todo valor “verdadeiro” exceto para false e null.

  • +, -, e / podem ser usadas para concatenar sequências de caracteres.

  • ( e ) podem ser usados para controlar explicitamente a ordem de precedência dos operadores.

Outras ExpressõesOutras Expressões permalink

  • Variáveis, como $var.

  • Chamadas de função, como nth($list, 1) ou var(--main-bg-color), que podem chamar funções da biblioteca do núcleo da Sass ou funções definidas pelo utilizador, ou que podem ser compiladas diretamente para CSS.

  • Funções especiais, como calc(1px + 100%) ou url(http://myapp.com/assets/logo.png), que têm suas próprias únicas regras de analise.

  • O seletor de pai, &.

  • O valor !important, que analisado como sequência de caracteres sem aspas.