Data types — SASS: Programming

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. 30 is the value itself, and px is the unit. There may be no unit, then only the value is left of the number. This helps when working with arithmetic operations.

What arithmetic operations are available with numbers in SASS? Exactly 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, which is 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 definitely 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 just 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 a natural answer, which we already knew:

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

The compiler tells us that this value is "invalid" for CSS and will abort the compilation. What does this mean? Actually, the compiler works by the simple rules of real-life math. That is, both the value and the unit are multiplied. If we multiply 10 meters by 10 meters we get 100 square meters. So either one of the numbers must not have a unit, or the unit is put 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 that can have only one of two values: true or false. In SASS these values are written that way: true and false.

Why would we want to have a minimal data type that cannot be counted or arithmetically manipulated? In fact, the Boolean type is very common and is often used to create conditional constructs. We will get acquainted with them in one of the next lessons. For now, just keep in mind that there 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.

To create a string, single ' '' or double ' '' quotation marks are used. You can choose this to your liking. The most important thing is that the closing quote must be of 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 own SASS code, try to stick to the same type of quotes. 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 one single string. This process is called concatenation. We take two or more strings or string variables and use the + operator to get a new string.

$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 not just add a substring to a string, but also execute some expression in this process. For example, we can substitute the result of a function. In SASS it works like this: we can specify inside any string a construct #{}, inside of which it is possible to insert any variable or even a whole function. 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}";
  }
}

This process of working with strings is more preferable. First of all, we initially see that we have a string. Secondly, this way saves us from writing arithmetic operations, which allows us to understand faster the process of what is happening in the code.

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

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

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

This creates a muxin that takes an icon name as its argument. This name is substituted by interpolation into the class name and into the icon path. Now you can just plug in this myxin with the necessary values and the class will be generated 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 the value of the width property should be specified without them. Since SASS interprets everything as a string, this entry will give us the expected result.

Check type

It is often useful to know the type of data we are working with. This can be necessary when creating complex functions in which different code will be used for different types of data.

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

$value: 10;

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

Additional materials

• Using interpolation within CSS functions

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“