Sequências de Caracteres

As sequências de caracteres são o que seu nome diz, sequências de caracteres (especialmente pontos de código unicode). A Sass suporta dois tipos de sequências de caracteres cujas estrutura interna é o mesmo mas que são interpretados de maneira diferente: sequências de caracteres com aspas, como "Helvetica Neue", e sequências de caracteres sem aspas (também conhecidas como identificadores), como bold. Juntas, estas cobrem os diferentes tipos de texto que aparecem na CSS.

💡 Fato Divertido:

Tu podes converter uma sequência de caracteres com aspas para uma sequência de caracteres sem aspas usando a função string.unquote, e podes converter uma sequência de caracteres sem aspas para uma sequência de caracteres com aspas usando a [função string.quote()].

SCSS Syntax

@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"

Sass Syntax

@use "sass:string"

@debug string.unquote(".widget:hover")  // .widget:hover
@debug string.quote(bold)  // "bold"

SaídasSaídas permalink

Todas as sequências de caracteres da Sass suportam os códigos de saída da CSS padrão:

  • Qualquer carácter que não seja uma letra de A à F ou um número de 0 à 9 (mesmo uma nova linha!) podem ser incluídos como parte de uma sequência de caracteres escrevendo \ em frente a ele.

  • Qualquer carácter podem ser incluído como parte de uma sequência de caracteres escrevendo \ seguido pelo seu número de ponto de código unicode escrito em hexadecimal. Tu podes opcionalmente incluir um espaço depois do número de ponto de código para indicar onde o número de unicode termina.

SCSS Syntax

@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"

Sass Syntax

@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a" (a string containing only a newline)
@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"

💡 Fato Divertido:

Para os caracteres que são permitidos aparecerem em sequências de caracteres, escrever a saída de unicode produz exatamente a mesma sequência de caracteres que a escrita do próprio carácter.

Com AspasCom Aspas permalink

As sequências de caracteres são escritas ou entre aspas simples ou entre aspas duplas, como em "Helvetica Neue". Elas podem conter interpolação, bem como qualquer carácter cuja saída não foi tratada exceto para:

  • \, que pode ser tratado como \\;
  • ' ou ", qualquer que foi usado para definir aquela sequência de caracteres, que pode podem ser tratadas como \' ou \";
  • novas linhas, que podem ser tratadas como \a (incluindo um espaço final).

As sequências de caracteres são asseguradas que sejam compiladas para sequências de caracteres de CSS que tem o mesmo conteúdo que as sequências de caracteres de Sass original. O formato exato pode variar baseado na implementação ou configuração—uma sequência de caracteres contendo uma aspas duplas pode ser compilada para "\"" ou '"', e um carácter que não faz parte da tabela ASCII pode ou não ser escapado. Mas este deveria ser analisado da mesma forma nom qualquer implementação de CSS compatível com os padrões, incluindo todos navegadores.

SCSS Syntax

@debug "Helvetica Neue"; // "Helvetica Neue"
@debug "C:\\Program Files"; // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""; // "\"Don't Fear the Reaper\""
@debug "line1\a line2"; // "line1\a line2"

$roboto-variant: "Mono";
@debug "Roboto #{$roboto-variant}"; // "Roboto Mono"

Sass Syntax

@debug "Helvetica Neue"  // "Helvetica Neue"
@debug "C:\\Program Files"  // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
@debug "line1\a line2"  // "line1\a line2"

$roboto-variant: "Mono"
@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"

💡 Fato Divertido:

Quando uma sequência de caracteres com aspas é injetada num outro valor através da interpolação, suas aspas são removidas! Isto torna fácil escrever sequências de caracteres contendo seletores, por exemplo, que pode ser injetada para regras de estilo sem adicionar aspas.

Sem AspasSem Aspas permalink

As sequências de caracteres sem aspas são escritas como identificadores de CSS, seguindo o diagrama de sintaxe abaixo. Eles podem incluir interpolação em qualquer parte.

Direitos de autor da Diagrama da Railroad © 2018 W3C® (MIT, ERCIM, Keio, Beihang). Responsabilidade, marca comercial da W3C e as regras da licença de documento permissiva aplicam-se.

SCSS Syntax

@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex

Sass Syntax

@debug bold  // bold
@debug -webkit-flex  // -webkit-flex
@debug --123  // --123

$prefix: ms
@debug -#{$prefix}-flex  // -ms-flex

⚠️ Atenção!

Nem todos os identificadores são analisados como sequências de caracteres sem aspas.

Por causa disto, é geralmente uma boa ideia escrever sequências de caracteres com aspas a menos que estejas especificamente a escrever o valor de uma propriedade de CSS que usa sequências de caracteres sem aspas.

Saídas em Sequências de Caracteres Sem AspasSaídas em Sequências de Caracteres Sem Aspas permalink

Compatibilidade (Normalização):
Sass de Dart
since 1.11.0
LibSass
✗
Sass de Ruby
✗

A LibSass, Sass de Ruby, e versões antigas da Sass de Dart não normalizam as saídas nos identificadores. Ao invés disto, o texto na sequência de caracteres sem aspas é o preciso texto que o utilizador escreveu. Por exemplo, \1F46D e 👭 não são considerados equivalentes.

Quando uma sequência de caracteres sem aspas é analisada, o texto literal das saídas são analisadas como parte da sequência de caracteres. Por exemplo, \a é analisado como os caracteres \, a, e espaço. Para assegurar que as sequências de caracteres sem aspas que tem os mesmos significados na CSS sejam analisadas da mesma maneira, ainda que, estas saídas sejam normalizadas. Para cada ponto de código, ou é escapado ou não é escapado:

  • Se for um carácter de identificador válido, é incluído sem ser escapado na sequência de caracteres sem aspas. Por exemplo \1F46D retorna a sequência de caracteres sem aspas 👭.

  • Se for um carácter imprimível que não seja uma nova linha ou uma tabulação, é incluído depois de um \. Por exemplo, \21 retorna a sequência de caracteres sem aspas \!.

  • De outro modo, a saída de unicode minúscula é incluída com um espaço intermédio. Por exemplo, \7Fx retorna a sequência de caracteres sem aspas \7f x.

SCSS Syntax

@use "sass:string";

@debug \1F46D; // 👭
@debug \21; // \!
@debug \7Fx; // \7f x
@debug string.length(\7Fx); // 5

Sass Syntax

@use "sass:string"

@debug \1F46D  // 👭
@debug \21  // \!
@debug \7Fx  // \7f x
@debug string.length(\7Fx)  // 5

Índices da Sequência de CaracteresÍndices da Sequência de Caracteres permalink

A Sass tem um número de funções de sequência de caracteres que recebem ou retornam números, chamados índices, que fazem referência aos caracteres numa sequência de caracteres. O índice 1 indica o primeiro carácter da sequência de caracteres. Nota que isto é diferente de muitas linguagens de programação onde os índices começam no 0! A Sass também torna fácil fazer referência ao final duma sequência de caracteres. O índice -1 faz referência ao último carácter numa sequência de caracteres, -2 faz referência ao penúltimo, e assim por diante.

SCSS Syntax

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"

Sass Syntax

@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"