Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the Data types that SASS supports ?

  • Last Updated : 01 Aug, 2021

Sass is a CSS pre-processor scripting language. Here, we don’t need to confuse Sass and Scss, both are the same things but Sass holds older syntax before CSS3 & after CSS3 it is known as SCSS. Likewise all other programming languages, Sass also contains data types to work with different kinds of data that are being used. However, Sass is not a standard programming language but it does consist of data types. In this article, we will look at all the available data types used in Sass & also look for some use-cases. If you don’t know about SASS, please refer to SASS Introduction & SASS full form articles.
Sass contains a total of 7 data types: 

  • Numbers
  • Booleans
  • Lists
  • Maps
  • Null
  • String
  • Colors

Let’s discuss each data type in a sequence.

Numbers: Sass consider the Number as integers and real numbers together, at the time of use, it does recognize which values are being used. There are some standard units that are used as px(pixels unit) or em(ephemeral unit). In order to perform an operation on numbers then we have to make sure that we are using the same unit otherwise it will throw some error.

Example:

$len: 10;
$wid: 20.5;

.main{
    height: 10px + 10; // It is valid
    width: 20px - 5; // It is valid
}

.box0{
    height: 10px + $len; // Valid
    height: 10em + $wid; // Valid
}

.box{
    height: 10em + 10em; // It is valid
    width: 10px + 10em; // Error
}

Booleans: Sass also has Booleans data types, Boolean has two values that is it could be either true or false. In order to work with boolean, it provides three basic operators that are known as and, or and not. Note that we are using small case letters for operators because capitals letters will be considered as strings in Sass.



  • and: It returns true values if both the values are true, otherwise, it will return a false value.

    @debug true and true; // Returns true value
  • or: It returns a true value if one out of both values is true or if both the values are true & return false if both the values are false.

    @debug true or false; // Returns true value
    @debug false or false; // Returns false value
  • not: It returns the negation value of the current existing value.

    @debug not true; // Returns false value
    @debug not false; // Returns true value

Lists: Sass supports List data type which is basically used to represent series of values that are separated by either spaces or commas. Note that if single values are being used in the list, it will a consider as a valid list.

Example :

$number-list: 10, 23, 10; // Seperated by commas.
$number-list2: 10px 20px 30px; // Seperated by spaces.

We can also use a nested list. In that case, we will use both types of values that are separated by commas as well as spaces, as shown below example.

$number-list3: 10, 20 30, 10; // Nested list.
$number-list4: 10, (20 30), 10; // Nested list same as $number-list3.

There will be one more case where a list can be empty.

$empty-list: ();

Maps: Maps in Sass is basically key-value pairs. These pairs must be separated by commas and all the pairs must be wrapped inside parentheses.



$new-map: (primary: #fdfdfd, secondary: $fff, background: #f1f1f1);  

In order to use Maps in Sass, we can’t use them directly. However, there are some functions that are available in sass, with the help of that, we can retrieve the value of maps and use it at the required place. These are some functions: –

  • map-get
  • map-merge
  • map-keys
  • map-has-keys
  • map-remove
  • map-values

Null: The null data type only contains one value that is basically known as nothing or unknown, it is represented as small cased null. As we have seen some data types have some functions and operators but for null, there are not any operators and functions are available in Sass.

$primary-color: null;

Note that if any variable is initialized with null and if we try to use that variable then it will be ignored at the compilation time and that particular variable will not be considered.

Strings: Strings are ordered sequences of characters that can be represented inside double quotes or single quotes or without quotes. Here are some examples that will clear our view on strings.

$color: blue;
$font-family: 'Courier New', Courier, monospace;
$heading: "Welcome";

There is one more thing that we need to know in Sass. There is a concept of Interpolation which is used to pass the variable to the selector. Its syntax is represented by #{<variable>}. When we use interpolation then the quoted strings are unwrapped from that quotes, as shown in the example.

$heading: "GeeksforGeeks";

h2.#{$heading} {
  color: green;
}

In the code below, we can see the CSS code for the above Sass code that is used for interpolation.

h2.GeeksforGeeks {
 color: green;
}

Colors: Sass supports color as a data type, as it is used to define the color value. Here, we can see that the same color expressions that are being used in regular CSS.

  • RGB (Red, Green, Blue):

    $primary: rgb(214,121,45);
  • RGBA (Red, Green, Blue, Alpha):

    Alpha is used for transparency & its value varies from 0.0 to 1.0 where 0 is completely transparent and 1.0 is completely opaque.

    $color: rgba(210, 122, 54, 0.5)
  • HSL ( Hue, Saturation, Lightness):

    This expression contains some different parameters other than regular colors.

    $color: hsl(0, 0%, 100%);
    • Hue can be considered as pure color which is represented in a color wheel and can be selected by values from 0 to 360, in which each value holds slightly different colors.
    • Saturation applies a shade to the color as its value increases in terms of percentage. At 0% color looks washed out and as the value increases color gets to its purest form.
    • Lightness applies light layers to the color. Its value varies from 0 to 100%, at 0 it makes the color completely dark and at 100% completely white.
  • HSLA (Hue, Saturation, Lightness, Alpha):

    $color: hsla(100, 60%, 60%, 0.7)

    Here, alpha is used once again for transparency & its value varies from 0.0 (Transparent) to 1.0 (Opaque).

My Personal Notes arrow_drop_up
Recommended Articles
Page :