Strings in SASS

This article explains strings in SASS.

We will explain step-by-step from basic string operations to advanced usage of strings in SASS.

YouTube Video

Strings in SASS

SASS is a preprocessor for extending CSS, and strings are an essential element for making style definitions more flexible and dynamic.

Basics of Strings

Strings in SASS can be enclosed in either single or double quotes, and in some cases, quotes can be omitted to write them like identifiers. Below are basic examples of how to write them.

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

Notes

• Quoted strings are evaluated directly as string literals.
• Unquoted strings are often treated as CSS identifiers such as class names or IDs, so care should be taken to use them appropriately.

String Concatenation

In SASS, you can concatenate strings using the + operator.

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

• This code is an example of using the + operator in SASS to concatenate multiple strings and create a new string.

Advanced Example: Generating Class Names

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

• This code is an example of using the + operator in SASS to combine a base class name and a modifier, generating a new class name.

Using String Functions

SASS provides convenient built-in functions for various string operations such as quote control and substring extraction.

quote() and unquote()

With the quote() and unquote() functions, you can add or remove quotes from strings.

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

str-length($string)

The str-length() function gets the length of a string.

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

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

The str-insert() function inserts a string at the specified position.

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

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

The str-slice() function extracts a part of a string.

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

to-upper-case() and to-lower-case()

The to-upper-case() and to-lower-case() functions convert a string to upper or lower case, respectively.

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

Strings in Conditional Logic

By using SASS's @if directive, you can conditionally branch based on string values and flexibly switch styles according to themes and settings.

 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}

• This code is an example of using the @if directive in SASS to check if the theme is dark and switch styles accordingly.

Practical Example: Generating Dynamic Background Image Paths

Below is an example of using string manipulations to generate a background image 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}

Compiled Result

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

• This code is an example of concatenating strings in SASS to dynamically generate the path for a background image and apply it as a background.

Combining with Lists and Maps

By combining SASS lists and maps with string operations, you can generate styles more flexibly.

List Example

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

Compiled Result

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}

• This code is an example of using the @each directive in SASS to generate classes for each state in a list, dynamically setting contents by concatenating strings.

Map Example

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

Compiled Result

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

• This code is an example of using a SASS map to associate color names with values and generate each class dynamically with the @each directive.

Escaping Strings

In order to safely use certain strings as CSS identifiers, escaping may be necessary.

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

Compiled Result

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

• This code is an example of treating a string containing special characters as a variable in SASS, expanding it with #{$variable}, and using it as a valid class name in CSS.

Conclusion

String operations in SASS are more than just writing string literals—they are powerful tools for dynamically building styles. By utilizing the basic operations and functions introduced here, you can improve the reusability and maintainability of your CSS and design styles more efficiently.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video