HTML & CSS

Data Types in Sass

Gajendar Singh
Share

Data types exist in almost all programming languages and Sass is no exception. A data type is a way of classifying data into certain categories for different uses. For instance, 2 is a number and SitePoint is a string. In this tutorial, I will cover all seven data types that exist in Sass and include some examples illustrating the use of each one whenever possible.

Null

null is the most basic of all data types in Sass. It is not true or false, it is just empty. It does not have any value at all. One thing that you should be aware of is that any variant of null with even one letter in a different case will not be null. This implies that neither NULL nor Null are actually null. They are both strings.

Even though null represents nothing, it still returns a length of 1 when passed to the length(..) function. This is because null is still an entity, even if it has been used just to represent nothing. Also, you cannot concatenate null with other strings. For this reason, 'text' + null would be invalid and throw an error.

Booleans

This data type has only two possible values: true and false. Only two values evaluate to false in Sass — false itself and null. Everything else returns true. Consider the following code:

$i-am-true: true;
$a-number: 2;

body {
  @if not $i-am-true {
    background: rgba(255, 0, 0, 0.6);
  } @else {
    background: rgba(0, 0, 255, 0.6); // expected
  }
}

.warn {
  @if not $a-number {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
  } @else {
    display: none; // expected
  }
}

Here, I have used two variables — $i-am-true and $a-number. Before explaining the code further I should mention that the not operator in Sass is equivalent to the ! operator present in other languages. Consequently, the condition @if not $i-am-true is equivalent to if (!$i-am-true) which ultimately evaluates to false because $i-am-true is true. This results in a blue background.

As I mentioned earlier, anything besides false and null evaluates to true. This means that the variable $a-number will also evaluate to true. Therefore, the paragraph with class warn should not be displayed. As you can see in the demo below, this is indeed the case.

See the Pen Sass Booleans by SitePoint (@SitePoint) on CodePen.

Number

Numbers are used extensively in CSS. Most of the time they are accompanied by a unit of some sort but they are still technically numbers. Unsurprisingly, Sass also has a numbers data type. You can perform basic mathematical operations on these values.

One thing to keep in mind is that these operations are valid only on numbers with compatible units. For example:

$size: 18;                  // A number
$px-unit: $size * 1px;      // A pixel measurement
$px-string: $size + px;     // A string
$px-number: $px-unit / 1px; // A number

At this point, we have four variables. $size is a bare number. $px-unit multiplies $size by 1px to convert it to a pixel measurement. $px-string, although it evaluates to 18px, is not a number. It is a string. This is because px itself is treated as a string and adding a string to a number results in a string. $px-number is again a bare number obtained by dividing $px-unit with 1px.

Now, consider the code below where I use these variables to style a button:

.button {
   background: rgba(255, 0, 0, $px-number * 3 / 100);
   padding: $px-unit / 2;
   border-radius: $px-string * 3; // throws error
   margin-top: $px-number * 2px;
}

The background property above evaluates to rgba(255, 0, 0, 0.54). The padding property also works perfectly. However, the border-radius property throws an error because it can’t multiply a string with a number. In the accompanying demo I have used various numbers and styled some elements based on the resulting values.

See the Pen Sass Numbers by SitePoint (@SitePoint) on CodePen.

Strings

Strings are commonly used in CSS to set various font styles along with other properties. Sass, just like CSS, accepts both quoted and unquoted strings, even if they contain spaces. One thing you should be aware of is that not escaping strings that have special characters can throw errors. For example:

$website: 'SitePoint'; // Stores SitePoint

$name: 'Gajendar' + ' Singh'; 
// 'Gajendar Singh'

$date:  'Month/Year : ' + 3/2016;
// 'Month/Year : 3/2016'

$date:  'Month/Year : ' + (3/2016);
// 'Month/Year : 0.00149' 
// This is because 3/2016 is evaluated first.

$variable: 3/2016;      // Evaluated to 0.00149
$just-string: '3/2016'; // '3/2016'

The $name in first line is stored like a string as expected. Interestingly, in the second statement, the value 3/2016 is not evaluated but treated as a string. This implies that string can concatenate with other data types as well. However, you still cannot concatenate null with a string.

In the third statement, the variable is evaluated directly because there is no other string to trigger the concatenation instead of evaluation. If you want to store something like 3/2016 as a string you will have to use the quotes like I did in the final statement.

Since we are on this topic, I would also like to mention that if you want to use variables inside a string, you will have to use a process called variable interpolation. To be more precise, you will have to wrap your variables in #{}. Here is an example:

$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'

$author: 'Author : #{$name}';
// 'Author : Gajendar'

The interpolation method could be useful in situations where the value of a variable is determined by some conditional statements. This codepen should make it clearer:

See the Pen Sass Strings by SitePoint (@SitePoint) on CodePen.

Colors

CSS color expressions come under the color data type. You can refer to the colors in hexadecimal notation, as rgb, rgba, hsl and hsla values or use native keywords like pink, blue, etc. What Sass does is provide you with additional capabilities so that you can use the colors more effectively. For instance, you can add color values into Sass!

Consider the following color manipulations made possible by Sass:

$color: yellowgreen;           // #9ACD32
color: lighten($color, 15%);    // #b8dc70
color: darken($color, 15%);     // #6c9023
color: saturate($color, 15%);   // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red);           // #ff8000

If you are wondering how Sass can add colors together then let me explain. Before adding the colors, Sass separates all the color channels and adds corresponding channels separately. In this case, red with value #ff0000 when added to green with value #008000 produces #ff8000. You should also keep in mind that you can’t add colors with different alpha values together with this method.

The rest of the color functions are self-explanatory. Lighten just lightens a given color by a given value and so on. Here, is a codepen demo with all these functions in action:

See the Pen Sass Colors by SitePoint (@SitePoint) on CodePen.

Lists

If you are familiar with arrays, you will not have much trouble understanding lists. Lists are just the Sass version of arrays. They can store zero, one or multiple values and even other lists. To create a list with different values, you need to separate the values with valid delimiters — a space or a comma. Have a look at the following code:

$font-list: 'Raleway','Dosis','Lato';
// Three comma separated elements

$pad-list: 10px 8px 12px;
// Three space separated elements

$multi-list: 'Roboto',15px 1.3em;
// This multi-list has two lists.

As evident from these statements, you can store multiple types of values in a list. The first two lists have three elements each. However, the next list named $multi-list has just two elements separated by a comma. The first element is the string 'Roboto' and the second element is another list with two elements separated by a space. This implies that using different delimiters in the same list creates nested lists.

When used together with loops, lists can prove to be really useful. The following codepen demo highlights this:

See the Pen Sass List by SitePoint (@SitePoint) on CodePen.

I have used the nth($list, $n) function in the demo above to get the nth item in the list. There are a lot of other useful list functions that you should know about too.

Maps

Sass maps are like associative arrays. A map stores both keys and values associated with those keys. Maps must always be surrounded by parentheses and individual elements need to be comma separated. A given key in a map can only have one associated value. However, a given value can be associated with many keys. Please note that map keys can be of any type including maps. Here is some code to create and use maps:

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background');
}

In the code above we first created a map with the name $styling. The map has various key value pairs to define different CSS properties.

Maps have various functions that we can use to manipulate them or extract values from them. One such function I have used here is map-get. It takes two parameters, the map itself and the key whose value you want. I used this function above to set the CSS properties on our h1 tag.

You can also iterate through a map to access all the key-value pairs one at a time. This codepen demo shows how to iterate through maps:

See the Pen Sass Maps by SitePoint (@SitePoint) on CodePen.

Conclusion

Sass data types may not seem to be very useful by themselves but when used with other features that Sass offers, they can do wonders when used correctly.

Since maps and lists are more complex than other data types I will be writing more detailed tutorials on them in the coming weeks. If you have any questions regarding the data types, let me know in the comments below.