Строки в SASS

В этой статье объясняются строки в SASS.

Мы пошагово объясним от базовых операций со строками до продвинутого использования строк в SASS.

YouTube Video

Строки в SASS

SASS — это препроцессор для расширения возможностей CSS, а строки являются неотъемлемым элементом для создания более гибких и динамичных определений стилей.

Основы строк

В SASS строки можно заключать в одиночные или двойные кавычки, а в некоторых случаях кавычки можно опустить и записывать строки как идентификаторы. Ниже приведены базовые примеры записи строк.

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

Примечания

• Строки в кавычках интерпретируются непосредственно как строковые литералы.
• Строки без кавычек часто рассматриваются как CSS-идентификаторы, такие как имена классов или ID, поэтому следует использовать их с осторожностью.

Конкатенация строк

В SASS можно объединять строки с помощью оператора +.

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

• Этот код является примером использования оператора + в SASS для объединения нескольких строк с созданием новой строки.

Продвинутый пример: генерация имён классов

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

• Этот код показывает, как с помощью оператора + в SASS объединить базовое имя класса и модификатор для генерации нового имени класса.

Использование строковых функций

SASS предоставляет удобные встроенные функции для различных операций со строками, таких как управление кавычками и извлечение подстрок.

quote() и unquote()

С помощью функций quote() и unquote() можно добавлять или удалять кавычки у строк.

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

str-length($string)

Функция str-length() возвращает длину строки.

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

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

Функция str-insert() вставляет строку в указанную позицию.

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

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

Функция str-slice() извлекает часть строки.

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

to-upper-case() и to-lower-case()

Функции to-upper-case() и to-lower-case() преобразуют строку соответственно в верхний или нижний регистр.

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

Строки в условной логике

Используя директиву @if в SASS, можно выполнять условные ветвления на основе значений строк и гибко переключать стили в зависимости от темы и настроек.

 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}

• Этот код — пример использования директивы @if в SASS для проверки, является ли тема тёмной, и соответствующего переключения стилей.

Практический пример: генерация динамических путей к фоновым изображениям

Ниже приведён пример использования строковых операций для генерации URL фонового изображения.

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}

Скомпилированный результат

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

• Этот код — пример объединения строк в SASS для динамического генерации пути к фоновому изображению и применения его в качестве фона.

Комбинирование с списками и картами

Комбинируя списки и карты SASS с операциями со строками, можно более гибко генерировать стили.

Пример списка

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

Скомпилированный результат

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}

• Этот код показывает пример применения директивы @each в SASS для генерации классов для каждого состояния в списке с динамическим заданием содержимого через объединение строк.

Пример карты

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

Скомпилированный результат

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

• Этот код является примером использования карты SASS для сопоставления имён цветов со значениями и динамической генерации классов с помощью директивы @each.

Экранирование строк

Чтобы безопасно использовать некоторые строки в качестве CSS-идентификаторов, может потребоваться экранирование.

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

Скомпилированный результат

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

• Этот код демонстрирует пример использования строки с особыми символами в качестве переменной в SASS, раскрытия её с помощью #{$variable} и применения в качестве допустимого имени класса в CSS.

Заключение

Операции со строками в SASS — это не просто запись строковых литералов, а мощные инструменты для динамического построения стилей. Используя представленные здесь базовые операции и функции, вы сможете повысить повторное использование и удобство поддержки вашего CSS, а также эффективнее проектировать стили.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video