Built-in string functions in SASS - Mini Project: Build & Apply

Using Built-in String Functions in Sass

📖 Scenario: You are creating styles for a website. You want to use Sass string functions to manipulate text values for colors and fonts in your styles.

🎯 Goal: Build a Sass stylesheet that uses built-in string functions to change text case, check string length, and extract parts of strings.

📋 What You'll Learn

Create a Sass variable with a string value

Create a helper variable for a string length threshold

Use Sass string functions to transform and check the string

Output the final CSS rules using the transformed strings

💡 Why This Matters

🌍 Real World

Web developers often need to manipulate text values in stylesheets for dynamic theming or responsive design.

💼 Career

Knowing Sass string functions helps front-end developers write cleaner, more maintainable CSS with dynamic text styling.

1

Create a Sass variable with a string

Create a Sass variable called $font-name and set it to the string "OpenSans".

SASS

$font-name: "OpenSans";
// Your code here

Hint

Use $font-name: "OpenSans"; to create the variable.

2

Add a length threshold variable

Create a Sass variable called $min-length and set it to the number 7.

SASS

$font-name: "OpenSans";
$min-length: 7;
// Your code here

Hint

Use $min-length: 7; to create the variable.

3

Use string functions to check length and uppercase

Create a variable called $font-name-length that stores the length of $font-name using the Sass str-length() function. Then create a variable called $font-name-upper that stores the uppercase version of $font-name using the Sass to-upper-case() function.

SASS

$font-name: "OpenSans";
$min-length: 7;
$font-name-length: str-length($font-name);
$font-name-upper: to-upper-case($font-name);
// Your code here

Hint

Use str-length($font-name) and to-upper-case($font-name) to create the variables.

4

Output CSS using the transformed strings

Write a CSS rule for body that sets font-family to $font-name-upper. Then write a CSS rule for h1 that sets content to the first 4 characters of $font-name using the Sass str-slice() function.

SASS

$font-name: "OpenSans";
$min-length: 7;
$font-name-length: str-length($font-name);
$font-name-upper: to-upper-case($font-name);

body {
  font-family: $font-name-upper;
}

h1::after {
  content: str-slice($font-name, 1, 4);
}
// Your code here

Hint

Use font-family: $font-name-upper; in body and content: str-slice($font-name, 1, 4); in h1::after.