Cadenas en SASS

Este artículo explica las cadenas en SASS.

Explicaremos paso a paso desde operaciones básicas de cadenas hasta usos avanzados de cadenas en SASS.

YouTube Video

Cadenas en SASS

SASS es un preprocesador para extender CSS, y las cadenas son un elemento esencial para hacer que las definiciones de estilos sean más flexibles y dinámicas.

Conceptos Básicos de las Cadenas

Las cadenas en SASS pueden estar entre comillas simples o dobles y, en algunos casos, se pueden omitir las comillas para escribirlas como identificadores. A continuación hay ejemplos básicos de cómo escribirlas.

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

Notas

• Las cadenas entre comillas se evalúan directamente como literales de cadena.
• Las cadenas sin comillas a menudo se tratan como identificadores CSS, como nombres de clase o IDs, por lo que se debe tener cuidado de usarlas apropiadamente.

Concatenación de Cadenas

En SASS, puedes concatenar cadenas utilizando el operador +.

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

• Este código es un ejemplo de cómo usar el operador + en SASS para concatenar varias cadenas y crear una nueva cadena.

Ejemplo Avanzado: Generación de Nombres de Clase

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

• Este código es un ejemplo de cómo usar el operador + en SASS para combinar un nombre de clase base y un modificador, generando un nuevo nombre de clase.

Uso de Funciones de Cadenas

SASS proporciona funciones integradas convenientes para varias operaciones con cadenas como el control de comillas y la extracción de subcadenas.

quote() y unquote()

Con las funciones quote() y unquote(), puedes añadir o quitar comillas a las cadenas.

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

str-length($string)

La función str-length() obtiene la longitud de una cadena.

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

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

La función str-insert() inserta una cadena en la posición especificada.

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

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

La función str-slice() extrae una parte de una cadena.

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

to-upper-case() y to-lower-case()

Las funciones to-upper-case() y to-lower-case() convierten una cadena a mayúsculas o minúsculas, respectivamente.

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

Cadenas en Lógica Condicional

Usando la directiva @if de SASS, puedes ramificar condicionalmente según los valores de las cadenas y cambiar los estilos de forma flexible de acuerdo a temas y configuraciones.

 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 es un ejemplo de cómo usar la directiva @if en SASS para comprobar si el tema es dark y así cambiar los estilos según corresponda.

Ejemplo Práctico: Generación Dinámica de Rutas de Imágenes de Fondo

A continuación se muestra un ejemplo de cómo usar manipulaciones de cadenas para generar una URL de imagen de fondo.

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 es un ejemplo de cómo concatenar cadenas en SASS para generar dinámicamente la ruta de una imagen de fondo y aplicarla como fondo.

Combinando con Listas y Mapas

Combinando listas y mapas de SASS con operaciones con cadenas, puedes generar estilos de manera más flexible.

Ejemplo 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 es un ejemplo de cómo usar la directiva @each en SASS para generar clases para cada estado en una lista, estableciendo contenido dinámicamente mediante la concatenación de cadenas.

Ejemplo 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 es un ejemplo de cómo usar un mapa en SASS para asociar nombres de colores a valores y generar cada clase dinámicamente con la directiva @each.

Escape de Cadenas

Para utilizar de manera segura ciertas cadenas como identificadores CSS, puede ser necesario usar escapes.

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 es un ejemplo de cómo tratar una cadena que contiene caracteres especiales como una variable en SASS, expandiéndola con #{$variable} y usándola como un nombre de clase válido en CSS.

Conclusión

Las operaciones con cadenas en SASS son más que simplemente escribir literales de cadena; son herramientas poderosas para construir estilos de forma dinámica. Al utilizar las operaciones y funciones básicas presentadas aquí, puedes mejorar la reutilización y el mantenimiento de tu CSS y diseñar estilos de manera más eficiente.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video