Strings em SASS

Este artigo explica sobre as strings em SASS.

Vamos explicar passo a passo, desde operações básicas até o uso avançado de strings em SASS.

YouTube Video

Strings em SASS

SASS é um pré-processador para estender o CSS, e strings são um elemento essencial para tornar as definições de estilo mais flexíveis e dinâmicas.

Noções Básicas sobre Strings

As strings em SASS podem ser envolvidas por aspas simples ou duplas e, em alguns casos, as aspas podem ser omitidas para escrevê-las como identificadores. Abaixo estão alguns exemplos básicos de como escrevê-las.

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

Notas

• As strings entre aspas são avaliadas diretamente como literais de string.
• Strings sem aspas geralmente são tratadas como identificadores CSS, como nomes de classes ou IDs, portanto deve-se tomar cuidado ao usá-las adequadamente.

Concatenação de Strings

No SASS, você pode concatenar strings usando o operador +.

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• Este código é um exemplo de uso do operador + no SASS para concatenar várias strings e criar uma nova string.

Exemplo Avançado: Gerando Nomes de Classes

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• Este código é um exemplo de uso do operador + no SASS para combinar um nome de classe base e um modificador, gerando um novo nome de classe.

Usando Funções de String

O SASS fornece funções internas convenientes para várias operações com strings, como controle de aspas e extração de substrings.

quote() e unquote()

Com as funções quote() e unquote(), você pode adicionar ou remover aspas das strings.

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

A função str-length() obtém o comprimento de uma string.

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

A função str-insert() insere uma string na posição especificada.

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

A função str-slice() extrai uma parte de uma string.

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() e to-lower-case()

As funções to-upper-case() e to-lower-case() convertem uma string para maiúsculas ou minúsculas, respectivamente.

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

Strings em Lógica Condicional

Ao usar a diretiva @if do SASS, você pode ramificar condicionalmente com base nos valores das strings e trocar estilos de forma flexível conforme temas e configurações.

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• Este código é um exemplo de uso da diretiva @if no SASS para verificar se o tema é dark e trocar os estilos de acordo.

Exemplo Prático: Gerando Caminhos Dinâmicos para Imagens de Fundo

Abaixo está um exemplo de manipulação de strings para gerar uma URL de imagem de fundo.

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

Resultado Compilado

1.background {
2    background-image: url("/images/background.jpg");
3}

• Este código é um exemplo de concatenação de strings no SASS para gerar dinamicamente o caminho para uma imagem de fundo e aplicá-la como background.

Combinando com Listas e Mapas

Ao combinar listas e mapas do SASS com operações de string, você pode gerar estilos de forma mais flexível.

Exemplo de Lista

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

Resultado Compilado

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

• Este código é um exemplo de uso da diretiva @each no SASS para gerar classes para cada estado de uma lista, definindo dinamicamente os conteúdos por concatenação de strings.

Exemplo de Mapa

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

Resultado Compilado

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• Este código é um exemplo de uso de um mapa no SASS para associar nomes de cores com valores e gerar cada classe dinamicamente com a diretiva @each.

Escapando Strings

Para usar certas strings de maneira segura como identificadores CSS, pode ser necessário fazer escape.

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

Resultado Compilado

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• Este código é um exemplo de como tratar uma string contendo caracteres especiais como uma variável no SASS, expandi-la usando #{$variable} e utilizá-la como um nome de classe válido no CSS.

Conclusão

As operações com strings em SASS vão além da simples escrita de literais—são ferramentas poderosas para construir estilos de forma dinâmica. Ao utilizar as operações e funções básicas apresentadas aqui, você pode melhorar a reutilização e a manutenção do seu CSS e criar estilos de maneira mais eficiente.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video