String types and concatenation in SASS

Introduction

Strings let you store text in your styles. Concatenation means joining strings together to make new text.

When you want to combine colors or words to create a new style value.

When you need to build class names or IDs dynamically.

When you want to add units like 'px' or '%' to numbers in styles.

When you want to create complex font or background properties by joining parts.

When you want to reuse parts of strings to keep your code clean.

Syntax

SASS

$string1: "Hello";
$string2: 'World';
$combined: $string1 + " " + $string2;

You can use either double quotes "" or single quotes '' for strings.

Use the + operator to join strings together.

Examples

This joins two strings to make "Hi there!".

SASS

$greeting: "Hi" + " there!";

This adds the unit "px" to the number 16, making "16px".

SASS

$font-size: 16 + "px";

This joins first and last name with a space in between.

SASS

$full-name: 'John' + ' ' + 'Doe';

Sample Program

This Sass code creates two strings and joins them with a space. Then it sets the combined string as the content of the ::before pseudo-element of the body, so the text "Good Morning" appears at the top of the page.

SASS

@use "sass:string";

$first: "Good";
$second: 'Morning';

$combined: $first + " " + $second;

body::before {
  content: $combined;
  display: block;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  color: #333;
}

Important Notes

Remember, the content property only shows text when used with ::before or ::after pseudo-elements.

Strings in Sass keep their quotes unless you use functions to remove them.

Summary

Strings store text in Sass and can use single or double quotes.

Use the + operator to join strings together.

Concatenation helps build dynamic style values easily.