Strängar i SASS

Den här artikeln förklarar strängar i SASS.

Vi förklarar steg för steg från grundläggande strängoperationer till avancerade användningar av strängar i SASS.

YouTube Video

Strängar i SASS

SASS är en preprocessor för att utöka CSS, och strängar är ett viktigt element för att göra stildelningarna mer flexibla och dynamiska.

Grunderna om strängar

Strängar i SASS kan omslutas av antingen enkla eller dubbla citattecken, och i vissa fall kan citattecken utelämnas för att skriva dem som identifierare. Nedan följer grundläggande exempel på hur man skriver dem.

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

Anteckningar

• Citerade strängar tolkas direkt som sträng-litteral.
• Ociterade strängar behandlas ofta som CSS-identifierare såsom klassnamn eller ID, så man bör vara noga med att använda dem på rätt sätt.

Strängkonkatenering

I SASS kan du konkatenera strängar med operatorn +.

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

• Den här koden är ett exempel på hur man använder operatorn + i SASS för att sammanfoga flera strängar och skapa en ny sträng.

Avancerat exempel: Generera klassnamn

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

• Den här koden är ett exempel på att använda operatorn + i SASS för att kombinera ett basklassnamn och en modifierare, vilket skapar ett nytt klassnamn.

Använda strängfunktioner

SASS tillhandahåller bekväma inbyggda funktioner för olika strängoperationer såsom kontroll av citattecken och extrahering av delsträngar.

quote() och unquote()

Med funktionerna quote() och unquote() kan du lägga till eller ta bort citattecken från strängar.

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

str-length($string)

Funktionen str-length() hämtar längden på en sträng.

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

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

Funktionen str-insert() infogar en sträng på den angivna positionen.

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

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

Funktionen str-slice() extraherar en del av en sträng.

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

to-upper-case() och to-lower-case()

Funktionerna to-upper-case() och to-lower-case() omvandlar en sträng till versaler respektive gemener.

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

Strängar i villkorslogik

Genom att använda SASS @if-direktivet kan du villkorsvis förgrena dig utifrån strängvärden och flexibelt växla stilar baserat på teman och inställningar.

 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}

• Den här koden är ett exempel på att använda @if-direktivet i SASS för att kontrollera om temat är dark och byta stil därefter.

Praktiskt exempel: Skapa dynamiska sökvägar för bakgrundsbilder

Nedanför är ett exempel på att använda strängmanipuleringar för att generera en bakgrundsbilds-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}

Kompilerat resultat

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

• Den här koden är ett exempel på att sammanfoga strängar i SASS för att dynamiskt skapa sökvägen till en bakgrundsbild och använda den som bakgrund.

Kombinera med listor och mappar

Genom att kombinera SASS-listor och mappar med strängoperationer kan du skapa stilar mer flexibelt.

Exempel på lista

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

Kompilerat resultat

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}

• Den här koden är ett exempel på att använda @each-direktivet i SASS för att skapa klasser för varje tillstånd i en lista, där innehållet sätts dynamiskt genom att konkatenera strängar.

Exempel på mapp

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

Kompilerat resultat

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

• Den här koden är ett exempel på att använda en SASS-mapp för att koppla färgnamn till värden och skapa varje klass dynamiskt med @each-direktivet.

Escapning av strängar

För att säkert använda vissa strängar som CSS-identifierare kan det behövas escapning.

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

Kompilerat resultat

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

• Den här koden är ett exempel på hur man behandlar en sträng som innehåller specialtecken som en variabel i SASS, expanderar den med #{$variable} och använder den som ett giltigt klassnamn i CSS.

Slutsats

Strängoperationer i SASS handlar om mer än att bara skriva sträng-litteral – de är kraftfulla verktyg för att skapa stilar dynamiskt. Genom att utnyttja de grundläggande operationerna och funktionerna som introducerades här kan du förbättra återanvändbarheten och underhållbarheten för din CSS och utforma stilar mer effektivt.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video