Strenge i SASS

Denne artikel forklarer strenge i SASS.

Vi vil gennemgå trin for trin fra grundlæggende strengoperationer til avanceret brug af strenge i SASS.

YouTube Video

Strenge i SASS

SASS er en præprocessor til udvidelse af CSS, og strenge er et essentielt element for at gøre stildefinitioner mere fleksible og dynamiske.

Grundlæggende om strenge

Strenge i SASS kan omgives af enten enkelte eller dobbelte anførselstegn, og i nogle tilfælde kan anførselstegn udelades, så de skrives som identifikatorer. Herunder er grundlæggende eksempler på, hvordan de skrives.

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

Noter

• Strenge med anførselstegn evalueres direkte som streng-litteraler.
• Strenge uden anførselstegn behandles ofte som CSS-identifikatorer såsom klassenavne eller ID'er, så man bør være opmærksom på at bruge dem korrekt.

Streng-sammenkædning

I SASS kan du sammenkæde strenge med +-operatoren.

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

• Denne kode er et eksempel på brug af +-operatoren i SASS til at sammenkæde flere strenge og oprette en ny streng.

Avanceret eksempel: Generering af klassenavne

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

• Denne kode er et eksempel på brug af +-operatoren i SASS til at kombinere et basis-klassenavn og en modifier for at generere et nyt klassenavn.

Brug af strengfunktioner

SASS tilbyder praktiske indbyggede funktioner til forskellige strengoperationer som f.eks. styring af anførselstegn og udtræk af delstrenge.

quote() og unquote()

Med funktionerne quote() og unquote() kan du tilføje eller fjerne anførselstegn fra strenge.

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

str-length($string)

Funktionen str-length() returnerer længden af en streng.

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

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

Funktionen str-insert() indsætter en streng på den angivne position.

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

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

Funktionen str-slice() udtrækker en del af en streng.

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

to-upper-case() og to-lower-case()

Funktionerne to-upper-case() og to-lower-case() konverterer en streng til henholdsvis store eller små bogstaver.

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

Strenge i betinget logik

Ved at bruge SASS's @if-direktiv kan du betinge forgreninger på baggrund af strengværdier og fleksibelt skifte stilarter alt efter temaer og indstillinger.

 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}

• Denne kode er et eksempel på brug af @if-direktivet i SASS til at tjekke, om temaet er dark, og tilpasse stilen derefter.

Praktisk eksempel: Generering af dynamiske stier til baggrundsbilleder

Herunder er et eksempel på brug af strengmanipulation til at generere en URL til et baggrundsbillede.

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}

Kompileret resultat

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

• Denne kode er et eksempel på sammenkædning af strenge i SASS for dynamisk at generere stien til et baggrundsbillede og anvende det som baggrund.

Kombination med lister og kort (maps)

Ved at kombinere SASS-lister og maps med strengoperationer kan du generere stilarter mere fleksibelt.

Liste-eksempel

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

Kompileret 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}

• Denne kode er et eksempel på brug af @each-direktivet i SASS til at generere klasser for hver tilstand i en liste og dynamisk angive indhold ved at sammenkæde strenge.

Map-eksempel

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

Kompileret resultat

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

• Denne kode er et eksempel på at bruge et SASS-map til at knytte farvenavne til værdier og dynamisk generere hver klasse med @each-direktivet.

Escape af strenge

For sikkert at kunne bruge visse strenge som CSS-identifikatorer kan det være nødvendigt at escapere dem.

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

Kompileret resultat

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

• Denne kode er et eksempel på at behandle en streng med specialtegn som en variabel i SASS, udvide den med #{$variable} og bruge den som et gyldigt klasse-navn i CSS.

Konklusion

Strengoperationer i SASS handler ikke kun om at skrive streng-litteraler – de er kraftfulde værktøjer til dynamisk at opbygge stilarter. Ved at bruge de grundlæggende operationer og funktioner, der er introduceret her, kan du forbedre genanvendeligheden og vedligeholdelsen af dit CSS og designe stilarter mere effektivt.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video