Get up to 40 % extra points for free! More info
Save up to 80 % on our Swift e-learning courses. Only this week!

# Lesson 3 - Data types in Sass

In the previous exercise, Solved tasks for the Sass CSS preprocessor introduction, we've practiced our knowledge from previous lessons.

In the previous exercise, we refreshed our memory and tried to put our knowledge about the Sass preprocessor into practice. In today's tutorial, we're going to introduce data types which we'll use in the preprocessor.

Sass uses several data types. We'll talk about numbers, strings, colors, booleans, null, lists, and maps.

For each data type, there are also various functions available. We'll name those which could be helpful the most. Of course, all the functions can be found in the documentation at http://sass-lang.com/…nctions.html

## Numbers

Values of the numeric data type can be any real numbers. A number can be specified as integer, decimal, fraction... We can perform math operations with them, such as adding, subtracting, multiplying, or dividing.

### Important functions

• `percentage(\$number)` - returns a given number converted to a percentage
```percentage(0.23) => 23%
percentage(100px / 50px) => 200%```
• `round(\$number)` - rounds a number to the closest integer
```round(23.4px) => 23px
round(23.6px) => 24px```
• `abs(\$number)` - returns the absolute value of a given number
```abs(23px) => 23px
abs(-23px) => 23px```
• `min(\$number1, \$number2, ...)` - returns the lowest from the given numbers
```min(7px, 23px) => 7px
min(2em, 23em, 7em) => 2em```
• `max(\$number1, \$number2, ...)` - returns the highest from the given numbers
```min(7px, 23px) => 23px
min(2em, 23em, 7em) => 23em```
• `random(\$limit)` - returns a random number between 1 (inclusive) and \$limit (exclusive)
```random(23) => 7
random(23) => 3
random(23) => 11```

### Exercise #1

Find the lowest number from the list: 7px, 15px, 3px. If the lowest number is 3, color the text to red.

```\$min: min(7px, 15px, 3px);
@if \$min == 3 { color: red }```

We can use either 3px or 3 in the condition.

## Strings

This data type allows to store strings. We can specify it using quotation marks or without them.

• Text in quotation marks - "text", or we can use apostrophes as well as 'text':
```\$a: "hi";
\$b: 'hello';```
• Text without quotation marks is simply written as text.
`\$c: hello;`

We can also concatenate strings using the `+` operator.

`\$d: \$a + \$b;`

If we want to print the content of a variable, we can use the special `#{ ... }` syntax. The content inside the braces will be printed as a string. We can insert a variable content to a selector like this, for example `.block#{\$blockNumber}`.

### Important functions

• `unquote(\$string)` - returns a given text without quotation marks
```unquote("any text") => any text
unquote(any text) => any text```
• `quote(\$string)` - returns a given text with quotation marks
```quote(any text) => "any text"
quote("any text") => "any text"```
• `str-length(\$string)` - returns the length of a string (the number of characters, starting with 1)
`str-length(text) => 4`
• `to-upper-case(\$string)` - returns the upper case version of a given string
`to-upper-case(any text) => ANY TEXT`
• `to-lower-case(\$string)` - returns the lower case version of a given string
`to-lower-case(ANY TEXT) => any text`

### Exercise #2

Let's say we have two variables - the first one containing the font size, the second one containing the line height. Let's also set the font to Arial.

```\$font-size: 22px;
\$line-height: 30px;
font: \$font-size/\$line-height Arial;```

The code above won't probably work - at least in the way we might think it would. The variables are of numeric data types, but we need a string. As you can probably guess, the numbers will divide:

`22px/30px => 0.73333`

What we really need is to convert the numbers to strings, so we're going to use `#{}`. Don't forget to wrap each variable, otherwise we'll get the same result. The right solution would be something like this:

`font: #{\$font-size}/#{\$line-height} Arial;`

### Exercise #3

Let's say we're in a situation where we want to name a selector after the value of some variable. In this case we can also use `#{}`.

Let's create a variable which will contain, for example, the name of a class coloring the font to red.

```\$class-name: red;
p.#{\$class-name}{
color: red;
}```

## Colors

Colors are yet another great data type. We can define them hexadecimally* or using the rgb/a*/hsl/a notation.

```\$hexadecimally: #24fa9e;
\$rgba: rgba(210, 73, 19, 0.2);
\$hsla: hsla(240, 100%, 50%, 0.5);```

Not only we can use colors as ordinary variables, we can also play with them a lot. It's possible to add, subtract, multiply etc. 2 colors of the same type. The color will be divided into separate compounds which will add up, subtract, or multiply. Of course, these operations happen only in the range of 0 as the minimum to FF as the maximum for the hexadecimal color notation. For RGB, 0 is the minimum and 255 is the maximum value.

### Important functions

There are a lot of functions that work with colors. I strongly recommend you to check out the documentation at http://sass-lang.com/…nctions.html

• `darken(\$color, \$percentage)` - returns a darker color based on \$color darkened by the \$percentage value
```darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
darken(#800, 20%) => #200```
• `lighten(\$color, \$percentage)` - returns a lighter color based on \$color lightened by the \$percentage value
```lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0%, 30%)
lighten(#800, 20%) => #e00```
• `opacify(\$color, \$plus)` - increases the alpha value of a color (makes it less transparent)
```opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 1.0)C```
• `transparentize(\$color, \$minus)` - decreases the alpha value of a color (makes it more transparent)
```transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)```

### Exercise #4

Let's try to add two colors and show the principle of color operations on them. As we've already stated before, if we perform a math operation on colors, the colors will divide into separate compounds and the math operation will be performed on those individual compounds. In this case, the color compounds will add up.

```color: #010203 + #040506;
// 01 + 04 => 05
// 02 + 05 => 07
// 03 + 06 => 09
// => #050709```

### Exercise #5

In this exercise let's try to multiply colors. We can multiply by a number or by another color.

```color: #010203 * 2;
// 01 * 2 => 02
// 02 * 2 => 04
// 03 * 2 => 06
// => #020406```

## Lists

The list data type is a series of values which are accessible by particular index. Indexes indicate the order of the items. We can define a list just by specifying its values separated by a space or comma.

### Important functions

• `length(\$list)` - returns the number of items in the list
```length(10px 20px 30px) => 3
length(alpha, beta, gamma, delta) => 4```
• `nth(\$list, \$index)` - returns the value of the item at the position \$index
```nth(10px 20px 30px, 2) => 20px
nth((alpha, beta, gamma, delta),1) => alpha```
• `join(\$list1, \$list2)` - merges the lists \$list1 and \$list2
`join((one, two), (alpha, beta)) => one, two, alpha, beta`
• `index(\$list, \$value)` - returns the index of the \$value in the \$list
`index(1px solid red, solid) => 2`

### Exercise #6

Let's create two lists of beasts and birds. The lists will be finally merged into a list of animals.

```\$beasts: cat lion lioness bear;
\$birds: parrot cockatiel budgie falcon eagle;
\$animals: join(\$beasts, \$birds);
// \$animals => cat lion lioness bear parrot cockatiel budgie falcon eagle```

### Maps

Map is a data type that you may know as the associative array. It contains values just like a list, but each value is accessible by its key. The keys are unique.

The map declaration can be seen in the example below.

`\$array: (key1: value1, key2: value2, key3: value3);`

### Important functions

• `map-get(\$map, \$key)` - returns the value with the key \$key from \$map
```map-get(("alpha": "alphaValue", "beta": "betaValue"), "alpha") => "alphaValue"
map-get(("alpha": "alphaValue", "beta": "betaValue"), "alphaa") => null```
• `map-remove(\$map, \$key)` - removes the value with the key \$key from \$map
`map-remove(("alpha": "alphaValue", "beta": "betaValue"), "beta") => ("alpha": "alphaValue")`
• `map-keys(\$map)` - returns the list of the keys from \$map
`map-keys("alpha": "alphaValue", "beta": "betaValue") => "alpha", "beta"`
• `map-values(\$map)` - returns the list of the values from \$map
`map-values("alpha": "alphaValue", "beta": "betaValue") => "alpha", "beta"`
• `map-has-key(\$map, \$key)` - returns whether there is a key \$key in \$map
```map-has-key(("alpha": "alphaValue", "beta": "betaValue"), "alpha") => true
map-has-key(("alpha": "alphaValue", "beta": "betaValue"), "gamma") => false```

## Null

The `null` data type is a little bit special. It can be used, for example, for optional parameters of mixins or functions. Another usage is, for example, as the output value of a function which determines what value should be used for a style - if NULL is the output, the property won't be added to the style.

## Boolean

Boolean is a data type that stores whether something is true or false. It can be used mostly with variables, as a function or mixin attribute and so on.

In the next lesson, Loops and @media in Sass, we'll introduce loops and the usage of @media queries.

Article has been written for you by Honza Bittner
Do you like this article?
2 votes
Everything is possible.

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!