Ciągi znaków w SASS

Ten artykuł wyjaśnia działanie ciągów znaków w SASS.

Wyjaśnimy krok po kroku od podstawowych operacji na ciągach znaków, po zaawansowane zastosowania ciągów w SASS.

YouTube Video

Ciągi znaków w SASS

SASS to preprocesor rozszerzający możliwości CSS, a ciągi znaków są kluczowym elementem pozwalającym uczynić definicje stylów bardziej elastycznymi i dynamicznymi.

Podstawy ciągów znaków

Ciągi znaków w SASS można zapisywać w cudzysłowie pojedynczym lub podwójnym, a w niektórych przypadkach można pominąć cudzysłowy i zapisać je jak identyfikatory. Poniżej znajdują się podstawowe przykłady ich zapisu.

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

Notatki

• Ciągi ujęte w cudzysłowy są bezpośrednio traktowane jako literały tekstowe.
• Ciągi bez cudzysłowów są traktowane często jako identyfikatory CSS, takie jak nazwy klas czy identyfikatorów, dlatego należy ich odpowiednio używać.

Łączenie ciągów znaków

W SASS możesz łączyć ciągi znaków, używając operatora +.

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

• Ten kod jest przykładem użycia operatora + w SASS do połączenia kilku ciągów znaków i utworzenia nowego ciągu.

Zaawansowany przykład: Generowanie nazw klas

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

• Ten kod pokazuje przykład użycia operatora + w SASS do połączenia bazowej nazwy klasy i jej modyfikatora, co służy wygenerowaniu nowej nazwy klasy.

Używanie funkcji dotyczących ciągów

SASS udostępnia przydatne wbudowane funkcje do różnych operacji na ciągach, takich jak zarządzanie cudzysłowami czy wyodrębnianie podciągów.

quote() i unquote()

Dzięki funkcjom quote() oraz unquote() możesz dodać lub usunąć cudzysłowy z ciągów znaków.

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

str-length($string)

Funkcja str-length() zwraca długość ciągu znaków.

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

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

Funkcja str-insert() wstawia ciąg znaków w określone miejsce.

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

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

Funkcja str-slice() pozwala wyodrębnić fragment ciągu znaków.

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

to-upper-case() i to-lower-case()

Funkcje to-upper-case() oraz to-lower-case() zamieniają ciąg znaków odpowiednio na wielkie lub małe litery.

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

Ciągi znaków w logice warunkowej

Używając dyrektywy @if w SASS, możesz warunkowo rozgałęziać kod na podstawie wartości tekstowych, elastycznie zmieniając style w zależności od motywu czy ustawień.

 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}

• Ten kod jest przykładem wykorzystania dyrektywy @if w SASS do sprawdzenia, czy motyw to dark i odpowiedniej zmiany stylów.

Praktyczny przykład: Generowanie dynamicznych ścieżek do obrazów tła

Poniżej znajduje się przykład użycia operacji na ciągach do wygenerowania adresu URL obrazu tła.

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}

Wynik kompilacji

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

• Ten kod jest przykładem łączenia ciągów znaków w SASS w celu dynamicznego wygenerowania ścieżki do obrazu tła i zastosowania go jako tła.

Łączenie z listami i mapami

Łącząc listy i mapy SASS z operacjami na ciągach, możesz generować style w bardziej elastyczny sposób.

Przykład z listą

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

Wynik kompilacji

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}

• Ten kod pokazuje przykład użycia dyrektywy @each w SASS do generowania klas dla każdego stanu z listy oraz dynamicznego ustalania zawartości poprzez łączenie ciągów znaków.

Przykład z mapą

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

Wynik kompilacji

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

• Ten kod to przykład użycia mapy w SASS do powiązania nazw kolorów z ich wartościami i dynamicznego generowania klas za pomocą dyrektywy @each.

Escapowanie ciągów znaków

Aby bezpiecznie używać niektórych ciągów jako identyfikatorów CSS, możliwe że konieczne będzie ich escape’owanie.

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

Wynik kompilacji

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

• Ten kod jest przykładem traktowania ciągu znaków zawierającego znaki specjalne jako zmiennej w SASS, rozwijania go za pomocą #{$variable} i używania jako poprawnej nazwy klasy w CSS.

Wnioski

Operacje na ciągach znaków w SASS to nie tylko pisanie literałów tekstowych – to potężne narzędzia do dynamicznego budowania styli. Wykorzystując przedstawione tutaj podstawowe operacje i funkcje możesz zwiększyć możliwość ponownego wykorzystania i łatwiejszego utrzymania swojego CSS oraz efektywniej projektować style.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video