Strenger i SASS

Denne artikkelen forklarer strenger i SASS.

Vi vil forklare trinn for trinn fra grunnleggende strengoperasjoner til avansert bruk av strenger i SASS.

YouTube Video

Strenger i SASS

SASS er en preprosessor for å utvide CSS, og strenger er et essensielt element for å gjøre stil-definisjoner mer fleksible og dynamiske.

Grunnleggende om strenger

Strenger i SASS kan omsluttes av enten enkle eller doble anførselstegn, og i noen tilfeller kan anførselstegn utelates slik at de skrives som identifikatorer. Nedenfor er grunnleggende eksempler på hvordan de kan skrives.

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

Notater

• Strenger med anførselstegn tolkes direkte som streng-litteraler.
• Strenger uten anførselstegn blir ofte behandlet som CSS-identifikatorer, som klassenavn eller ID-er, så det er viktig å bruke dem riktig.

Sammenkobling av strenger

I SASS kan du sette sammen strenger ved å bruke +-operatoren.

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

• Denne koden er et eksempel på bruk av +-operatoren i SASS for å sette sammen flere strenger til en ny streng.

Avansert eksempel: Generering av klassenavn

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

• Denne koden er et eksempel på å bruke +-operatoren i SASS til å kombinere et grunnklassenavn med en modifikator og generere et nytt klassenavn.

Bruke strengfunksjoner

SASS tilbyr praktiske innebygde funksjoner for ulike strengoperasjoner, som håndtering av anførselstegn og utvinning av delstrenger.

quote() og unquote()

Med funksjonene quote() og unquote() kan du legge til eller fjerne anførselstegn fra strenger.

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

str-length($string)

Funksjonen str-length() henter lengden på en streng.

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

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

Funksjonen str-insert() setter inn en streng på en angitt posisjon.

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

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

Funksjonen str-slice() trekker ut en del av en streng.

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

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

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

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

Strenger i betinget logikk

Ved å bruke SASS sin @if-direktiv, kan du forgrene deg betinget basert på strengverdier og fleksibelt bytte stiler i henhold til temaer og innstillinger.

 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 koden er et eksempel på bruk av @if-direktivet i SASS for å kontrollere om temaet er dark og endre stilene deretter.

Praktisk eksempel: Lage dynamiske bakgrunnsbilde-stier

Nedenfor er et eksempel på å bruke strengmanipulering for å generere en bakgrunnsbilde-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}

Kompilert resultat

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

• Denne koden er et eksempel på å sette sammen strenger i SASS for å dynamisk generere stien til et bakgrunnsbilde og bruke det som bakgrunn.

Kombinere med lister og kart

Ved å kombinere SASS-lister og kart med strengoperasjoner kan du generere stiler mer fleksibelt.

Listeeksempel

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

Kompilert 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 koden er et eksempel på å bruke @each-direktivet i SASS for å generere klasser for hver tilstand i en liste og dynamisk sette innhold ved å sette sammen strenger.

Karteksempel

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

Kompilert resultat

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

• Denne koden er et eksempel på å bruke et SASS-kart for å knytte fargenavn til verdier og generere hver klasse dynamisk med @each-direktivet.

Escape av strenger

For å kunne bruke visse strenger som CSS-identifikatorer på en trygg måte, kan det være nødvendig å escape dem.

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

Kompilert resultat

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

• Denne koden er et eksempel på hvordan en streng med spesialtegn kan behandles som en variabel i SASS, utvides med #{$variable}, og brukes som et gyldig klassenavn i CSS.

Konklusjon

Strengoperasjoner i SASS er mer enn bare å skrive streng-litteraler—de er kraftige verktøy for å bygge stiler dynamisk. Ved å bruke de grunnleggende operasjonene og funksjonene som er introdusert her, kan du forbedre gjenbrukbarheten og vedlikeholdbarheten til CSS-en din og designe stiler mer effektivt.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video