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.
Key Takeaways
- Sass supports seven primary data types: Null, Booleans, Numbers, Strings, Colors, Lists, and Maps. Each data type has unique characteristics and uses within the Sass language.
- Null in Sass is an empty data type that does not contain any value. It can’t be concatenated with other strings. Booleans only have two values: true and false. Only false and null evaluate to false in Sass, everything else returns true.
- Strings in Sass can be both quoted and unquoted. Special characters within strings need to be escaped to avoid errors. Variable interpolation is used to include variables within a string.
- Sass offers additional capabilities for the color data type, allowing manipulation of color values. Lists in Sass are similar to arrays, capable of storing multiple values, including other lists. Maps in Sass are like associative arrays, storing both keys and values associated with those keys.
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.
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 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.