Strings in SASS

Dit artikel legt strings in SASS uit.

We leggen stap voor stap uit van basis stringbewerkingen tot geavanceerd gebruik van strings in SASS.

YouTube Video

Strings in SASS

SASS is een preprocessor voor het uitbreiden van CSS, en strings zijn een essentieel onderdeel om stijldefinities flexibeler en dynamischer te maken.

Basisprincipes van strings

Strings in SASS kunnen tussen enkele of dubbele aanhalingstekens staan, en in sommige gevallen kun je de aanhalingstekens weglaten zodat ze als identificatoren worden geschreven. Hieronder staan basisvoorbeelden van hoe je ze kunt schrijven.

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

Notities

• Strings tussen aanhalingstekens worden direct als string-literals beoordeeld.
• Strings zonder aanhalingstekens worden vaak behandeld als CSS-identificatoren zoals classnamen of ID's, dus wees voorzichtig met het juiste gebruik ervan.

Strings samenvoegen

In SASS kun je strings samenvoegen met behulp van de +-operator.

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

• Deze code is een voorbeeld van het gebruik van de +-operator in SASS om meerdere strings samen te voegen tot een nieuwe string.

Geavanceerd voorbeeld: Klasse-namen genereren

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

• Deze code is een voorbeeld waarbij de +-operator wordt gebruikt om een basis class-naam en een modifier te combineren, waardoor een nieuwe class-naam ontstaat.

Stringfuncties gebruiken

SASS biedt handige ingebouwde functies voor diverse stringbewerkingen zoals beheer van aanhalingstekens en het extraheren van substrings.

quote() en unquote()

Met de functies quote() en unquote() kun je aanhalingstekens toevoegen aan of verwijderen uit strings.

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

str-length($string)

De functie str-length() geeft de lengte van een string terug.

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

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

De functie str-insert() voegt een string in op een opgegeven positie.

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

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

De functie str-slice() haalt een deel uit een string.

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

to-upper-case() en to-lower-case()

De functies to-upper-case() en to-lower-case() zetten een string respectievelijk om naar hoofdletters of kleine letters.

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

Strings in voorwaardelijke logica

Door het gebruik van de @if-directive van SASS kun je voorwaardelijk vertakken op basis van stringwaarden en stijlen flexibel aanpassen aan thema's en instellingen.

 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}

• Deze code is een voorbeeld van het gebruik van de @if-directive in SASS om te controleren of het thema dark is en de stijlen daarop aan te passen.

Praktisch voorbeeld: Dynamische achtergrondafbeeldingspaden genereren

Hieronder vind je een voorbeeld van het gebruik van stringbewerkingen om een achtergrondafbeelding-URL te genereren.

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}

Gecompileerd resultaat

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

• Deze code is een voorbeeld waarbij strings in SASS worden samengevoegd om dynamisch het pad van een achtergrondafbeelding te genereren en deze als achtergrond toe te passen.

Combineren met lijsten en mappen

Door SASS-lijsten en -mappen te combineren met stringbewerkingen kun je stijlen flexibeler genereren.

Lijstvoorbeeld

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

Gecompileerd resultaat

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}

• Deze code is een voorbeeld van het gebruik van de @each-directive in SASS om toepassingen voor elke status in een lijst te genereren en de inhoud dynamisch samen te stellen door strings samen te voegen.

Mapvoorbeeld

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

Gecompileerd resultaat

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

• Deze code is een voorbeeld van het gebruik van een SASS-map om kleurnamen aan waarden te koppelen en elke klasse dynamisch te genereren met de @each-directive.

Strings escapen

Om bepaalde strings veilig als CSS-identificatoren te gebruiken, kan escaping noodzakelijk zijn.

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

Gecompileerd resultaat

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

• Deze code is een voorbeeld van het behandelen van een string met speciale tekens als een variabele in SASS, het uitbreiden ervan met #{$variable}, en het gebruiken als een geldige class-naam in CSS.

Conclusie

Stringbewerkingen in SASS zijn meer dan alleen het schrijven van string-literals; ze zijn krachtige hulpmiddelen voor het dynamisch opbouwen van stijlen. Door gebruik te maken van de hier geïntroduceerde basisbewerkingen en functies, kun je de herbruikbaarheid en het onderhoud van je CSS verbeteren en stijlen efficiënter ontwerpen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video