Data types — SASS: Programming

• Numbers in SASS
• Boolean type
• Lines
• Check type
• Additional materials

When creating a complex SASS file, there are inevitably different types of values: numbers, strings, and some others. In this tutorial, we'll look at the basic simple data types that are the best place to start your work with SASS.

Simple data types include:

1. Numbers
2. Lines
3. Boolean type

Numbers in SASS

Numbers are one of the simplest data types in SASS. We met them all the time during the last SASS course. A number in the preprocessor consists of the value itself and a unit of measure.

Let's look at a simple example:

$number: 30px;

In the $number variable we put a numeric data type. The value is 30, and the unit is px. There may be no unit, so only the value is left of the number. It helps when working with arithmetic operations.

What arithmetic operations are available with numbers in SASS? The same as in real life. We can add, subtract, multiply, divide numbers, and take the remainder of a division. If you have experience with any programming language, you won't have any trouble with these simple operations.

Let's apply the basic operations in SASS. To do that, I suggest using the interactive mode available in the console after installing SASS to your system. You can read more about this in the tutorial on SASS installation:

10px + 10px // => 20px
120px - 20px // => 100px

10px * 10px // => 100px*px

Let's dwell on multiplication separately. You may notice that the 10px * 10px operation resulted in an inarticulate 100px*px instead of 100px. Such a value would not please CSS because the unit of measure px*px or pixel squared does not exist in the standard. But maybe the SASS compiler will figure out what we want and translate it into pixels. Let's check this by creating a small piece of SASS code:

$width: 10px * 10px;

body {
  width: $width;
}

Let's try to compile, to which we get an answer we already know:

Error: 100px*px isn't a valid CSS value.
  ╷
4 │   width: $width;
  │          ^^^^^^
  ╵

The compiler tells us that the value is invalid for CSS and will abort the compilation. What does this mean? The compiler works by the simple rules of real-life math. That is, we multiply both the value and the unit.

If we multiply 10 meters by 10 meters we get 100 square meters. So either one of the numbers must not have a unit, so we put it later. We will get to know this when we work with strings:

$width: 10px * 10;

body {
  width: $width;
}

body {
  width: 100px;
}

Boolean type

In mathematics and programming, a Boolean type is a data type with one of two values: true or false. In SASS, we write these values like true and false.

Why would we use a minimal data type that we cannot count or arithmetically manipulate? Programmers often use the Boolean type to create conditional constructs. We will get acquainted with them in one of the lessons. For now, it is a magic Boolean data type with only two possible values:

$dark-mode: true;
$small-text: false;

Lines

Strings are one of the central topics in SASS. We can use them to pass arguments to functions and mixins and generate unique classes for our project. By default, SASS treats everything as a string.

Let's create a string. We use single 'single ' or "double" quotation marks. You can choose this to your liking. The most important thing is that the closing quote must be the same type as the opening one:

$string: "Hello, World";

a {
  &:before {
    content: $string;
  }
}

a:before {
  content: "Hello, World";
}

If we use different types of quotes, the interpreter will get confused and eventually swear at us:

$string: 'Hello, World";

a {
  &:before {
    content: $string;
  }
}

Error: Expected '.
  ╷
1 │ $string: 'Hello, World";
  │                         ^
  ╵

As you write your SASS code, stick to the same quote type. This uniformity will make the code easier to read and may prevent some errors.

We can stack lines in SASS. It helps to get several different strings into a single one. We call this process concatenation.

We take two or more strings or variables and use the + operator to get a new one:

$hello: "Hello";
$world: "World";
$name: "Nikita";

a.world {
  &:before {
    content: $hello + ", " + $world;
  }
}

a.user {
  &:before {
    content: $hello + ", " + $name;
  }
}

a.world:before {
  content: "Hello, World";
}

a.user:before {
  content: "Hello, Nikita";
}

In addition to the concatenation process, there is a related process called interpolation. In this case, we can add a substring to a string and execute some expressions. For example, we can substitute the result of a function. In SASS, it works like this:

• We can specify inside any string a construct #{}
• Then we can insert any variable or even a whole function in it
• The result will be output inside the string

The example above using interpolation would look like this:

$hello: "Hello";
$world: "World";
$name: "Nikita";

a.world {
  &:before {
    content: "#{$hello}, #{$world}";
  }
}

a.user {
  &:before {
    content: "#{$hello}, #{$name}";
  }
}

First of all, we initially see that we have any strings. Secondly, this way saves us from writing arithmetic operations, which allows us to understand faster what is happening in the code.

A great example of using interpolation is to create a mixin in which we pass a class name or part of it as a mixin argument:

@mixin icon($name, $size) {
  .icon-#{$name} {
    background: url("images/icon-#{$name}.svg");
    width: #{$size}px;
    height: #{$size}px;
  }
}

@include icon("login", "32");

It creates a mixin that takes an icon name as its argument. We substitute this name by interpolation into the class name and the icon path. Now you can plug in this mixin with the necessary values, and the code will generate the class automatically:

.icon-login {
  background: url(images/icon-login.svg);
  width: 32px;
  height: 32px;
}

Also note the entry width: #{$size}px;. In this case, we don't put quotes because we should specify the value of the width property without them. Since SASS interprets everything as a string, this entry will give us the expected result.

Check type

It is good to know the type of data we are working with. It can be necessary when creating complex functions with different codes for different data types.

The function type-of helps to find out the data type of a variable. You can specify the construct @debug type-of(variable name) anywhere in your SASS file. You will get the variable type when you compile it through the terminal:

$value: 10;

@debug type-of($value); // => number

Additional materials

• Using interpolation within CSS functions