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.
