How to give your Sass skills a boost

This article first appeared in net magazine   issue 258. The @if statement lets you control what happens if a condition is true or false. This can be done with a loop:

$stops: ();
$list-length: length($colors);
@for $i from 1 through $list-length {
$color: nth($colors, $i);
$new-stops: $color percentage(($i – 1)/$list-length), $color percentage($i/$list-length);
$stops: join($stops, $new-stops, comma);
}
html {
@include background-image(linear-gradient(top, $stops));
}
 
First, initalise a new empty list called $stops which will store the colour-percentage pairs. Text colour
Let’s say we want to change our text colour based on   how dark our background colour is:

@if(lightness($background) 50%) {
color: white;
} @else {
color: black;
}
 
Sass’   lightness function returns the lightness component of our background, and our equality operator checks if its value is less than 50 per cent. This function can replace our @for loop:

@function gradient($stops: ()) {
$stops-length: round(length($stops) / 2);
@if $stops-length == $list-length {
@return $stops;
}
$i: if($stops-length == 0, 1, $stops-length+1);
$color: nth($colors, $i);
$new-stops: $color percentage(($i – 1)/$list-length), $color percentage($i/$list-length);
$stops: join($stops, $new-stops, comma);
@return gradient($stops);
}
 
The function is bigger than the loop but is more self-sufficient: it initialises its own list of empty   $stops, adding to it and passing it to itself on every call. Our favourite web fonts – and they don’t cost a penny
Brilliant WordPress tutorial selection
How to build an app: try these great tutorials Read these! Unlike lists, maps must always be comma-separated. Variables, logic, control directives and functions are all at your disposal and can be used to great effect in programming your CSS. Like this? These determine the kind of value a variable can hold and what operations can be performed on it. Sass shares several basic data types with many programming languages: numbers (integers or decimal numbers, optionally including a unit such as px or deg), booleans (true or false), strings (such as the word ‘hello’) and nulls (you can think of this as an empty value). It returns one of two values (the second or   third argument) based on if the boolean condition (the first argument) is true or false. What’s more, frameworks such as Compass offer tons of additional functionality that can be used to take your CSS programming to the next level. To make a gradient with a   hard stop between the colours, each colour must have a stop at two points. The resulting gradient looks like this:

linear-gradient(to bottom, #b00b00 0%, #b00b00 14.28571%, #bada55 14.28571%, #bada55 28.57143%, #de1e7e 28.57143%, #de1e7e 42.85714%, #f0feaf 42.85714%, #f0feaf 57.14286%, #ac1d1c 57.14286%, #ac1d1c 71.42857%, #e1e100 71.42857%, #e1e100 85.71429%, #facade 85.71429%, #facade 100%)
 
Recursion
Let’s take it in step futher by using a recursive function instead of a loop. Lists are a series of values, like the ones we have already covered, or even other lists. Words:   Jackie Balzer
Jackie Balzer is an expert in Sass, CSS, HTML and JavaScript. It provides several different kinds of data types which you can use to manipulate values in interesting ways, use logic to output code in different ways, and control structures and functions to do advanced processing. It uses half the length of $stops to determine which   $color in the list to calculate, and ceases calling itself when $stops is twice as long as $colors. Lists can be separated by spaces or commas, like so:

$margins: 10px 5px 20px 15px; // space-separated list
$font-stack: Helvetica, Arial, sans-serif; // comma-separated list
$colors: heading red, paragraph blue, figure orange, caption white; // comma-separated list of space-separated lists
 
A map is like a list on steroids: you can think of it as a list of key-value pairs. A simple map could look like this:

$map: ( heading: red,
paragraph: blue,
figure: orange,
caption: white );
 
Though you can use all of the basic operations we have already covered on list and maps, their power lies within Sass functions, which you can use to iterate over, manipulate and retrieve data from your lists and maps. Sass has a ton of great functions built in, and you can write your own. This can sometimes have unexpected results, as demonstrated in the code below:

$number: 1.2; // number data type
$unit: em; // string data type, since there is no associated number
$result: $number + $unit; // adds a number type and a string type, creating the string ‘1.2em’
$rounded: round($result); // causes an error – $rounded: “1.2em” is not a number for `round’
 
These basic operations are the foundation for how powerful Sass variables are. The @for loop iterates over the list of colours, counting from one through the length of the list. There are also some Sass-specific data types: colours (all CSS representations of a colour, such as blue or #0000ff), lists and maps. Like lists, you can use any data type for either the key or value, including other maps. Functions are awesomely flexible as they can take a specific number of arguments, named arguments or infinite arguments (netm.ag/arguments-258). Sass’ list function, nth, gets the colour at index $i of the list. There is an if function to shorten this:

$color: if(lightness($background) 50%, white, black);
 
This function behaves like a a ternary operator, a common programming structure. This is easy if you have a list:

$colors: #b00b00 #bada55 #de1e7e #f0feaf #ac1d1c #e1e100
html {
@include background-image(linear-gradient(top, $colors));
}
 
By default, each colour blends into the next. How about if you wanted to create a gradient with a specific set of colours? All data types support equality operators ( == , != , , = , and = ) and basic operations, such as arithmetic:

$inner-height: 100px – 30px; // equals 70px
$mix-color: #005cff+ // equals #207cff
 
You can check if values are equal:

$test1: 16 != blue; // true
$test2: 30% 100%; // false
$test3: blue == // true
$test4: 3/4 = .25; // false
 
Some data types have type-specific Sass functions:

$str-length: str-length(‘hello’); // gets the number of characters in a string: 5
$length: length(5px 10px 10px 5px); // gets the number of items in a list: 4
$round: round(4/3); // rounds the value of 4/3 to the nearest whole number: 1
 
You can change values from one type to another, which is called ‘typecasting’. Lists and maps  
Lists and maps are other more complex data types.

Leave a Reply

Your email address will not be published. Required fields are marked *