Working With Strings In Sass

Posted: 19 Jul 2016 05:30 AM PDT

Much of what you write in CSS is a string of some kind. Whether you're setting a font-family as "lucida grande" or declaring a class as the selector .masthead, you're working with strings. Despite how often strings are used in CSS, the language offers no way to manipulate them. Fortunately Sass does.

For the last couple of weeks I've been digging into data types in Sass. I started with an overview of data types, operators, and functions and then walked through the number data type, its operators, and the built-in functions Sass provides for working with numbers.

Today I want to talk similarly about strings, specifically the kind of strings Sass supports and the operators and functions you can use to work with strings.

Strings in Sass

CSS supports double and single quoted strings such as "Lucida Grande" or 'Lucida Grande' as well as unquoted stings such as Georgia, serif, or sans-serif. Sass naturally supports all three and generally compiles to the same type of quotes or lack of quotes in CSS.

For example say you're using a Sass variable to hold the typeface of your main headline, which is set on your h1 as follows:

1	h1 {font-family: $headline-typeface;}

Using unquoted, single quoted, and double quoted strings in your variables:

1  2  3

$headline-typeface: Lucida Grande;    $headline-typeface: 'Lucida Grande';    $headline-typeface: "Lucida Grande";

will compile to:

1  2  3

h1 { font-family: Lucida Grande; }    h1 { font-family: 'Lucida Grande'; }    h1 { font-family: "Lucida Grande"; }

In other words, whichever type of quote (or no quote) you used in your Sass will appear in your resulting CSS file.

Interpolation and Strings

That's how it generally works. The exception is interpolation ( #{} ), where all strings will become unquoted.

1 2	$headline-typeface: "Lucida Grande"; h1 { font-family: #{$headline-typeface}; }

compiles to:

1	h1 {font-family: Lucida Grande;}

Because I used interpolation to include the variable, the quotes were removed.

String Operators

The single Sass string operator is concatenation. Strings can be concatenated (linked together) using the + operator.

1	h1 { font-family: Geor + gia; }

compiles to:

1	h1 { font-family: Georgia; }

If you mix quoted and unquoted strings when concatenating, the result will be whichever is on the left side of the operator.

1 2	h1 { font-family: Geor + "gia"; } h1 { font-family: "Geor" + gia; }

compiles to:

1 2	h1 { font-family: Georgia; } h1 { font-family: "Georgia"; }

When two strings are placed next to one another even when there's a space between them, they are concatenated, including the space.

1	h1 { font-family: Luc + ida Grande; }

compiles to:

1	h1 {font-family: Lucida Grande;}

However, be careful with your quotes.

1	h1 {font-family: "Luc" + "ida" Grande;}

compiles to:

1	h1 {font-family: "Lucida" Grande;}

Since the above isn't valid CSS, anything marked up as an h1 in the previous example will use the browsers default serif or sans-serif font.

If you want to use dynamic values inside the string, you can use interpolation.

1  2  3  4

$margin-1: 10;    $margin-2: 12;    p { margin-top: #{$margin-1 + $margin-2}px; }

Here 10 and 12 will be added together as numbers to result in 22, which will then be concatenated with px and compile to:

1	p { margin-top: 22px; }

Notice that I didn't need to use the + operator to concatenate in this example.

Nulls in String Interpolation

If you've defined a variable as null and then use the variable in string interpolation, the null value is treated as an empty string for the interpolation

1  2  3  4  5

$value: null;    p:before {      content: "Today is a #{$value}} day.";  }

$value is replaced with an empty string and the Sass compiles to:

1  2  3

p:before {      content: "Today is a  day.";  }

Notice the extra space in the CSS (between a and day), which comes from the null value being converted to an empty string.

String Functions

While Sass provides only the single operator for strings, it does have a few built-in functions for manipulating strings. They might not appear useful at first, but they can be very useful when writing mixins and functions.

The function unquote($string) removes the quote (single or double) from a string and the function quote($string) adds a double quote around a string.

1 2	h1 { font-family: unquote("Lucida Grande"); } h2 { font-family: quote('Lucida' + ' Grande'); }

compiles to:

1 2	h1 { font-family: Lucida Grande; } h2 { font-family: "Lucida Grande"); }

Notice in the second line of code that the single quotes around Lucida and Grande were replaced with double quotes by the quote function.

If you need to know how many characters are in a string you can use the str-length($string) function.

1  2  3  4  5

$str: "I am a string.";    p {      font-size: str-length($str) + px;    }

This is hardly the way you'd want to set the font-size of a paragraph and I don't recommend you do, but the Sass does compile to:

1  2  3

p {      font-size: 14px;    }

If you count the characters in $str, you'll notice the spaces as well as the period at the end are included in the count.

The position of any character in the string (or the first character in a substring within the string) is known as its index. You can find the index using the str-index($string, $substring) function.

1  2  3  4  5

$string: "I am a another string";    str-index($string, a); => 3    str-index($string, am); => 3    str-index($string, an); => 8

One thing to note is that unlike most programming languages, the index of the first character is 1 instead of 0. Here the index of "I" is 1, the index of the space is 2, the index of "a" is 3, and so on.

In the first example above the function looks for the first occurrence of the letter "a" in the string, which occurs at index 3. The second function looks for the first occurrence of the letters "am" together, which is also index 3. Finally the third function looks for the first occurrence of the letters "an" together, which doesn't occur until index 8.

You can insert one string inside another using the str-insert($string, $insert, $index) function. $string is the initial string and $insert is the substring to insert into the string at index $index.

1  2  3

str-insert("abcd";, "X", 1) => "Xabcd"  str-insert("abcd";, "X", 4) => "abcXd"  str-insert("abcd", "X", 5) => "abcdX"

Notice the "X" (the $insert) is placed at the specified index with the remainder of $string (if any is still left) coming after. A negative index is valid and is counted from the end of $string toward the start.

1  2  3

str-insert("abcd", "X", -1) => "abcdX"  str-insert("abcd", "X", -4) => "aXbcd"  str-insert("abcd", "X", -5) => "Xabcd"

If the index given to the function is outside the bounds of the length of the string, the substring ($insert) will be inserted at either the front or back of the string, depending on the index specified.

You can extract a substring from a string using the str-slice($string, $start-at, [$end-at]) function. Here $string is the string and $start-at and $end-at are indices. The $end-at argument is optional and it defaults to -1 (or the last character in the string) if not included.

1  2  3  4  5

$string: "I am still a string."    str-slice($string, 6, 10) => "still"  str-slice($string, 6) => "still a string"  str-slice($string, -7, -1) => "string"

Finally there are two functions, to-upper-case($string) and to-lower-case($string) that change the case of a string and I trust you can figure out which does which based on the function name.

1  2  3  4  5  6  7  8  9  10

$font1: georgia;    $font2: HELVETICA;    h1 {     font-family: to-upper-case($font1);    }    h2 {     font-family: to-lower-case($font2);    }

compiles to:

1  2  3  4  5  6  7

h1 {      font-family: GEORGIA;    }    h2 {      font-family: helvetica;    }

Closing Thoughts

As I said at the end of last week's post on the number data type, if you've worked with programming languages before, this will likely be a very quick and simple review. If you haven't, I hope you can see that like numbers, Sass makes it pretty easy to work with and manipulate strings.

You probably won't use the string operator or any string functions until you write your own custom functions or mixins, but if you do, you'll often find you need to manipulate strings that result from one calculation to prepare them for use in another, which is when concatenation of the built-in functions come in handy.

The next two weeks I want to look at the color data type and the many functions Sass provides for working with colors. You can even build an entire color scheme from a single color using the some of the functions Sass provides.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.