Data Types in Sass

Share this article

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 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.


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.


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 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.


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.


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.


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.


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.

Frequently Asked Questions (FAQs) about Data Types in SASS

What are the different data types supported by SASS?

SASS supports seven primary data types. These include Numbers (e.g., 1.2, 13, 10px), Strings of text, quoted and unquoted (e.g., “foo”, ‘bar’, baz), Colors (e.g., blue, #04a3f9, rgba(255, 0, 0, 0.5)), Booleans (e.g., true, false), Nulls (e.g., null), Lists of values, separated by spaces or commas (e.g., 1.5em 1em 0 2em, Helvetica, Arial, sans-serif), and Maps from one value to another (e.g., (key1: value1, key2: value2)).

How can I use numbers in SASS?

Numbers are often used in CSS to set properties like width, height, or margin. In SASS, you can perform arithmetic operations on them, like addition, subtraction, multiplication, and division. For example, you can set a variable $width: 100px, and then use it in a property like margin: $width/2.

How does SASS handle strings?

SASS handles strings in two ways – quoted and unquoted. Both can be used interchangeably. However, some CSS properties require quoted strings, so it’s essential to use them appropriately. You can also use the + operator to concatenate strings in SASS.

Can I use standard CSS color names in SASS?

Yes, SASS supports all standard CSS color names, hex values, and rgba values. It also provides built-in functions for manipulating colors, like lighten, darken, saturate, and desaturate.

What are booleans in SASS and how are they used?

Booleans in SASS are logical data types that can only be true or false. They are typically used with control directives, such as @if and @else, to create conditional rules in your stylesheets.

What does ‘null’ mean in SASS?

Null in SASS is a special value that represents the absence of a value. It’s often used to define default values for variables or return values from functions.

How can I use lists in SASS?

Lists in SASS are like arrays in other programming languages. They can hold any number of values, which can be of any data type. Lists are often used with the @each directive to apply styles to multiple elements at once.

What are maps in SASS?

Maps in SASS are data structures that pair keys with values, similar to objects in JavaScript. They are useful for storing related values and accessing them using their associated keys.

Can I mix different data types in SASS?

Yes, SASS is a dynamically typed language, which means you can mix different data types. However, it’s important to ensure that the operations you perform on these values make sense and don’t result in unexpected behavior.

How can I convert between different data types in SASS?

SASS provides several built-in functions for converting between different data types. For example, you can use the to-number() function to convert a string to a number, or the to-string() function to convert a number to a string.

Gajendar SinghGajendar Singh
View Author

Gajendar is a web developer with a keen interest in learning new things in web development. He has been developing websites for five years and occasionally writes tutorials on topics he feels confident about.

AdvancedCSSdata typespatrickcsass
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week