Working With Strings In Sass

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:

[code type=css]
h1 {font-family: $headline-typeface;}
[/code]

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

[code type=css]
$headline-typeface: Lucida Grande;
$headline-typeface: ‘Lucida Grande’;
$headline-typeface: “Lucida Grande”;
[/code]

will compile to:

[code type=css]
h1 { font-family: Lucida Grande; }
h1 { font-family: ‘Lucida Grande’; }
h1 { font-family: “Lucida Grande”; }
[/code]

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.

[code type=css]
$headline-typeface: “Lucida Grande”;
h1 { font-family: #{$headline-typeface}; }
[/code]

compiles to:

[code type=css]
h1 {font-family: Lucida Grande;}
[/code]

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.

[code type=css]
h1 { font-family: Geor + gia; }
[/code]

compiles to:

[code type=css]
h1 { font-family: Georgia; }
[/code]

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

[code type=css]
h1 { font-family: Geor + “gia”; }
h1 { font-family: “Geor” + gia; }
[/code]

compiles to:

[code type=css]
h1 { font-family: Georgia; }
h1 { font-family: “Georgia”; }
[/code]

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

[code type=css]
h1 { font-family: Luc + ida Grande; }
[/code]

compiles to:

[code type=css]
h1 {font-family: Lucida Grande;}
[/code]

However, be careful with your quotes.

[code type=css]
h1 {font-family: “Luc” + “ida” Grande;}
[/code]

compiles to:

[code type=css]
h1 {font-family: “Lucida” Grande;}
[/code]

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.

[code type=css]
$margin-1: 10;
$margin-2: 12;

p { margin-top: #{$margin-1 + $margin-2}px; }
[/code]

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

[code type=css]
p { margin-top: 22px; }
[/code]

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

[code type=css]
$value: null;

p:before {
content: “Today is a #{$value} day.”;
}
[/code]

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

[code type=css]
p:before {
content: “Today is a day.”;
}
[/code]

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.

[code type=css]
h1 { font-family: unquote(“Lucida Grande”); }
h2 { font-family: quote(‘Lucida’ + ‘ Grande’); }
[/code]

compiles to:

[code type=css]
h1 { font-family: Lucida Grande; }
h2 { font-family: “Lucida Grande”); }
[/code]

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.

[code type=css]
$str: “I am a string.”;

p {
font-size: str-length($str) + px;
}
[/code]

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:

[code type=css]
p {
font-size: 14px;
}
[/code]

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.

[code type=css]
$string: “I am a another string”;

str-index($string, a); => 3
str-index($string, am); => 3
str-index($string, an); => 8
[/code]

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.

[code type=css]
str-insert(“abcd”;, “X”, 1) => “Xabcd”
str-insert(“abcd”;, “X”, 4) => “abcXd”
str-insert(“abcd”, “X”, 5) => “abcdX”
[/code]

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.

[code type=css]
str-insert(“abcd”, “X”, -1) => “abcdX”
str-insert(“abcd”, “X”, -4) => “aXbcd”
str-insert(“abcd”, “X”, -5) => “Xabcd”
[/code]

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.

[code type=css]
$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”
[/code]

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.

[code type=css]
$font1: georgia;
$font2: HELVETICA;

h1 {
font-family: to-upper-case($font1);
}

h2 {
font-family: to-lower-case($font2);
}
[/code]

compiles to:

[code type=css]
h1 {
font-family: GEORGIA;
}

h2 {
font-family: helvetica;
}
[/code]

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.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.