Lesson 3 - Data types in Sass

HTML and CSS Modern and professional web portfolio Data types in Sass

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
Avatar
Do you like this article?
1 votes
Everything is possible.
Activities (3)

 

 

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!