SASS Tutorial

If you’ve already created a website, you’re probably familiar with CSS. However, you might also have missed some hidden features when working with the stylesheet language. Designing websites with CSS can be very tedious, which is why so many de­vel­op­ers now rely on SASS. Behind the acronym is a promise: syn­tac­ti­cal­ly awesome stylesheets. SASS is both a pre­proces­sor and a stylesheet language.

The fact that this is a pre­proces­sor is because it needs to be converted. Before SASS can be played, the source code needs to be compiled into ordinary CSS. We also explain how this step works in the detailed SASS tutorial. To simplify learning SASS, we’ll take you step by step and explain every­thing with examples.

SASS is, in principle, platform in­de­pen­dent, which means you can work with it on PC, Mac, or Linux. SASS is based on Ruby, at least in the original version. Therefore, you need to have the pro­gram­ming language in­te­grat­ed into your system. Ruby should be pre-installed in macOS. For Windows PCs you can use the RubyIn­staller. The in­stal­la­tion package contains the language, a de­vel­op­ment en­vi­ron­ment (which you don’t need for SASS), and doc­u­men­ta­tion. In­stal­la­tion is also easy for Linux users.

The LibSASS project also bring SASS to other pro­gram­ming languages: C/C++, Java, JavaScript, Node PHP, Python, and a few other languages are available. Using ap­pro­pri­ate wrappers (an im­ple­men­ta­tion tool) you can take advantage of other pro­gram­ming languages. LibSASS, which is designed for libraries, as well as in­for­ma­tion about available wrappers, can be found on the official project website.

There are several ways to install SASS in your system. In the meantime, several ap­pli­ca­tions have been es­tab­lished to make your work with the stylesheet language easier. Some of these fees are free, but some (like Koala or Scout App) are available free of charge as open source software. In principle, however, you don’t need any ad­di­tion­al programs to use SASS on your system. Ruby contains the package manager gem, with which the stylesheet language can be easily im­ple­ment­ed using a command line command. To do this, open the terminal or the command prompt and enter the following command:

This should be enough. If you receive an error message, you might not have the necessary in­stal­la­tion rights. You can fix this by working with the sudo command (macOS, Linux) or starting the command prompt as an ad­min­is­tra­tor using the right mouse button (Windows). To check whether the in­stal­la­tion was suc­cess­ful and up to date, ask SASS which version is installed:

In addition to the in­stal­la­tion, you should also set up the com­pi­la­tion. In order for your SASS code to work on a website, it must first be converted to CSS. There are several ways to do this: if you have chosen one of the programs to install SASS, you can also use it for com­pi­la­tion. If you work with the task runners  Grunt or Gulp, they will do the work for you once you have set them up. For some text editors, there are even plugins that do the com­pi­la­tion for you. However, you can also do the con­ver­sion step from the command line.

SASS gives users the option to either recompile after each change in the source code or to enable a mon­i­tor­ing mode. In the latter case, the compiler checks either a file or an entire folder and performs the con­ver­sion au­to­mat­i­cal­ly. To monitor, use the command line to navigate to your website’s folder and start one of the two commands:

You can monitor the file “example.sass” and compile the source code into the file “example.sass.” If you add two more sub­fold­ers in your project folder – one for SASS files and another for CSS files – then name them “sass” and “css” files ac­cord­ing­ly, and you can monitor the entire folder:

As soon as you make a change in the SASS files and save them, the compiler au­to­mat­i­cal­ly over­writes the existing CSS files with the newer versions.

You may want to move your existing website, already written in tra­di­tion­al CSS, to SASS. You will also need to convert your old CSS code. Before you do this, however, you should consider whether you want to work in the original SASS syntax (in short: SASS) or choose the newer SCSS variant. You can read more about the dif­fer­ence between SASS and SCSS in our basics article. There are also commands for the con­ver­sions:

The converter reads the cor­re­spond­ing formats from the file ex­ten­sions. Al­ter­na­tive­ly, you can use a useful, simple website: for CSS 2 SASS/SCSS con­vert­ers, enter your CSS code on the left side of the window and display the converted source code on the right side in the desired format. Now you just have to copy the code into a file. If you decide to use SCSS, the con­ver­sion is optimal: rename your files – instead of “.css,” just type “.scss.” Any code written with CSS rules also works under SCSS.

As pre­vi­ous­ly mentioned, there is more than one syntax when it comes to SASS. Two competing formats have es­tab­lished them­selves. Orig­i­nal­ly, SASS was based on the syntax now known as “indented syntax,” where in­den­ta­tions trigger nesting and a line break ef­fec­tive­ly ter­mi­nates a line of code. SCSS, on the other hand, is more oriented towards the CSS format and requires curly brackets and semi­colons. To get this tutorial to work re­gard­less of the syntax, we will present the procedure in both formats. Here is a step-by-step guide to the pe­cu­liar­i­ties of SASS.

Most web de­vel­op­ers ap­pre­ci­ate the use of variables in SASS. With this useful function, you can save in­for­ma­tion under an alias and reuse it wherever you want. Variables are very popular in terms of color and size spec­i­fi­ca­tions, for example. A variable can be used to store a color’s hex value, or to adjust a fixed size using math­e­mat­i­cal functions. Variables are in­tro­duced in SASS with a dollar sign ($):

SASS

SCSS

Then you just have to insert the variables at the ap­pro­pri­ate places in the code:

SASS

SCSS

When compiling, the compiler finally adapts the syntax to CSS again and resolves the variables:

CSS

It may be useful to specify a default value for certain variables. Unless otherwise defined, SASS assumes this in­for­ma­tion. Con­verse­ly, if you define the variable dif­fer­ent­ly, the default in­for­ma­tion is ignored. This can be useful, for example, if a developer passes an in­com­plete product onto a client who still wants to make changes, or if a web designer uses his own template. You can create a preset like this by setting a “!default” flag. You can enter both normal values and variables that have already been defined:

SASS

SCSS

SASS has a handy directive that allows you to include other files in the stylesheet. For example, you create a file where you define all variables (here you can specify and name all required color values) and then import the file. Now use the in­for­ma­tion from the imported file as if it were in the current source code. This helps you keep your stylesheets clear. You can import as many files as your like using “@import” – even for sub­di­rec­to­ries. The function even handles importing multiple files in one step:

SASS

SCSS

If you want to include .sass. or .scss files, you don’t need to specify a file extension; the system au­to­mat­i­cal­ly assumes that you mean these files types. You can also include CSS files. However, you also specify the extension so that the computer knows exactly what you mean. Compiling also resolves this sim­pli­fi­ca­tion: the final CSS code no longer contains the directive, just the in­for­ma­tion from the cor­re­spond­ing files.

Partials are the most common thing you’ll import when working with SASS. Partials are code fragments, and they allow you to create modules that you can easily install again and again. If you name the file, it’s important to place an un­der­score before the actual name. This informs the compiler that the cor­re­spond­ing file does not require a CSS coun­ter­part. Otherwise, the system would convert all SASS files to CSS if properly monitored.

If you import the partials, omit the un­der­score. SASS also knows which file you mean. Therefore, it is necessary that you don’t create files with the same name. If you have both “example.sass” and “_example.sass,” this will lead to an error. This also applies to the file ex­ten­sions: “example.sass” and “example.scss” shouldn’t be in the same directory.

Another important directive are mixins. These are fixed rules that you can call up again and again in the stylesheet without having to insert the complete code again. This helps to work faster and keep the code leaner. Every­thing that is allowed in SASS can be included in a mixin – rules, pa­ra­me­ters, or functions. Even if space in the mixin has no re­stric­tions, it should not contain more than twenty lines. The ultimate goal is to increase sim­plic­i­ty instead of just making every­thing more com­pli­cat­ed.

To handle mixins ef­fec­tive­ly, you need two di­rec­tives: “@mixin” and “@include.” With the first one, you create the template, with the second you include the code block:

SASS

SCSS

When creating the mix, give the template a name (e.g. hidden). With this, you can also re-integrate the code block at the chosen positions:

SASS

SCSS

In the final CSS code, the complete source code block appears instead of the mixin. The de­f­i­n­i­tion of the mixin itself (@mixin) does not appear there anymore.

The extend rule saves you a lot of work. This directive ensures that all prop­er­ties in one class are passed to another. To avoid re­defin­ing every­thing, use “@extend.” The directive also works as a chain. A class defined by “@extend” can be part of a third class:

SASS

SCSS

The compiler resolves the code as follows:

CSS

In some sit­u­a­tions, you define the ap­pear­ance of a category that you don’t want to use on your actual website, using the form @extend. This happens fre­quent­ly when you are building your own library. SASS offers place­hold­er selectors for these sit­u­a­tions. You use a per­cent­age sign (%) to identify a class that you only create to use in other classes. If you don’t import this kind of selector when designing your website, SASS will not compile it into CSS:

SASS

SCSS

In the final CSS code, the class “module” no longer appears. Their prop­er­ties are passed directly to the class “post.”

CSS

The “!optional” flag can also be very helpful for extend – if you write an extension for a class that doesn’t exist, SASS will generate an error during com­pi­la­tion. With !optional you can avoid this. SASS will just ignore the command if it doesn’t find a suitable class.

In HTML, it goes without saying that the code is divided into a hi­er­ar­chi­cal tree structure. CSS ignores this function and forces the user to declare prop­er­ties over and over again. SASS brings the pos­si­bil­i­ty of nesting back into the stylesheets by allowing sub­cat­e­gories to inherit the prop­er­ties of the parent category. This also ensures that the code remains slimmer overall and the work involved in writing and waiting is less. For example, it is possible to define the ap­pear­ance of links and determine within the nesting how these links look when hovering – or if they have already been visited.

If nesting is used in the code, the ampersand (&) is used to replace part of the selector with the parent.

SASS

SCSS

During com­pi­la­tion, the nesting must be resolved again. In CSS, each state reappears sep­a­rate­ly defined.

CSS

Besides the nesting res­o­lu­tion, the com­pi­la­tion also ensures that the variables (the de­f­i­n­i­tion of which we omitted in the example) become hex values again.

With nesting, you can also pass on “prop­er­ties.” CSS knows some char­ac­ter­is­tics that belong to the same family. For example, all font for­mat­ting in­for­ma­tion belongs to the same family, but needs to be defined in CSS as in­di­vid­ual points – with their complete property names. SASS gives you the op­por­tu­ni­ty to group the in­di­vid­ual prop­er­ties under the family names.

SASS

SCSS

SASS has numerous functions to make working with your stylesheet easier. These are pre­fab­ri­cat­ed workflows that you would otherwise have to perform manually. The functions can be assigned to different cat­e­gories:

• Colors: With these functions, you can adjust color values, sat­u­ra­tion, trans­paren­cy, and many other prop­er­ties. For example, you can mix a new color with mix() from two colors.
• Listen: For lists (series of CSS property values), you can use functions to read the number of entries, for example, or merge several lists into one.
• Strings: Strings are fixed strings, like those used in texts. Functions of this kind au­to­mat­i­cal­ly put a string in quotation marks of a complete text in uppercase letters.
• Selectors: With this category of functions, you can ma­nip­u­late complete selectors. For example, “selector unify()” allows you to make one out of two selectors. This may save you a lot of paperwork.
• Numbers: In the area of numbers, values, or units, you will find functions that can, for example, round up and down, find the largest number in a set, or display a random number.
• Maps: In SASS, maps are data struc­tures con­sist­ing of keys and prop­er­ties. The cor­re­spond­ing functions ma­nip­u­late the col­lec­tions. For example, you can merge two maps or delete a specific key from a map.
• In­tro­spec­tion: Functions from this area provide insight into the complete stylesheet’s content. For example, check whether a specific feature, mixin, or function exists in your code.
• Mis­cel­la­neous: Mis­cel­la­neous SASS includes the helpful “if()” function. This should not be confused with the directive of the same name. The dif­fer­ence is explained in the section “branching” below.

You always insert functions into your code according to the same pattern: each function has an in­di­vid­ual name and contains certain pa­ra­me­ters in brackets, separated by commas. At the end, the function outputs a single value. Using a simple but very useful mix() function as an example, we will explain the SASS syntax:

SASS

SCSS

With this function, mix the two color values that you’ve already defined as variables (color values don’t need to be saved as variables; you can place the hex values directly in the function). The third parameter is what the mixing ratio should be: in our example, 30% of “$color-1” is included in the final result. If you leave the last parameter empty, SASS assumes a 50/50 mix. Just one value appears in the CSS itself – the resulting color’s hex value:

CSS

All the functions mentioned so far are already in SASS’s delivery state. The stylesheet language also allows you to define your own functions for a project. This makes it easier and faster to carry out work steps that occur fre­quent­ly. This means that functions are similar to mixins. While the latter have lines of code as output, functions only return one value. They create functions with the cor­re­spond­ing “@function” directive. In fact, you always create a function with a pair of di­rec­tives. In addition to the “@function,” an in­te­grat­ed “@return” is required where you define the output value:

SASS

SCSS

You can use the exemplary function to perform a cal­cu­la­tion for column width for a layout grid. In this example, there are 12 columns. In the next step, name the function and define how many pa­ra­me­ters it contains – in this example, it’s a number. Fur­ther­more, we determine what the function should do and therefore also what value it outputs. In this case, “column-width” mul­ti­plies the number you enter as a parameter by 100% and divides the result by the number of columns. Once you have defined the function, you can use it again and again with changing pa­ra­me­ters. Only the resulting value is stored in the final CSS:

CSS

Loops give the stylesheet language the appeal of a real pro­gram­ming language. Use Loops to create statement blocks in SASS that are repeated until a condition you specify occurs. There are three different di­rec­tives available for creating loops:

• @for
• @while
• @each

The “@for” loop is the standard case of a loop in the context of pro­gram­ming. The loop starts at the start and repeats the job until an exit state, and the end is reached. In SASS, this directive comes in two different variants: Either the last cycle is run again when the target is reached or the loop is exited be­fore­hand.

SASS

SCSS

After the directive, you first specify any variable ($i) and then define the start point (1) and the des­ti­na­tion point (4). With “through” you specify that the fourth rep­e­ti­tion should also be executed, while the loop stops after the third pass. If you specify a higher value than the end value for the start value, SASS counts backwards. You have two elements in the loop: the name in the CSS is chosen, which gets a higher number with “#{$i}.” The variable – and therefore also the name – is increased by 1 for each run.

Secondly, write in curly brackets or indented what is supposed to happen. In our example, a size spec­i­fi­ca­tion is ma­nip­u­lat­ed with an in­creas­ing value for each run. A separate entry then appears in the CSS for each run:

CSS

The “@while” directive works very similar to “@for.” However, while the latter has fixed start and des­ti­na­tion points, an “@while” loop contains a logical query: as long as a state is true, the state­ments are repeated. As you will see, we can achieve exactly the same result with the “@while” function:

SASS

SCSS

In this loop type, you first need to assign a value to the variable, since the directive itself does not require a start value. In the loop, you specify the status up to which the rep­e­ti­tions are carried out. In our example, the loop runs as long as the variable is less than 5. The statement within the loop is initially the same as with the “@for” example. Again, adjust the name of the variable element and increase its size. In addition, you need to include a command in the loop that increases “$i” on each pass, otherwise the loop will run until the SASS compiler is stopped. At the end, however, you get the same CSS code as you would in the “@for” loop.

The “@each” directive, on the other hand, works slightly dif­fer­ent­ly. This loop is based on a list: the loop passes through a col­lec­tion of data that you have defined. For each entry “@each” makes its own rep­e­ti­tion. For example, it would be possible to generate the same result again like with the other loops, by spec­i­fy­ing a list with the values 1,2,3, and 4. The real advantage of this loop, however, is that you can also enter other in­for­ma­tion besides numerical values in the list – e.g. use “@each” to insert different images into your design. You can either enter the data directly in the directive or enter the list in a variable first and then call it.

SASS

SCSS

Here you will also need a variable. This takes the name of one of the entries in the list with each run. The name is in­te­grat­ed into both the name of the code block and the image’s file name. In order for the design to work later, you first need to have stored the cor­re­spond­ing images under the specified path. The loop au­to­mat­i­cal­ly ensures that the variable takes over the next entry.

CSS

In addition to loops, SASS provides you with another means that comes from the world of pro­gram­ming: branching according to the if-then-else principle. With the “@if” directive, you only execute a statement if a certain state exists, otherwise another command takes effect. Aside from the directive, there is also a function if(). Both are in­de­pen­dent of each other, but can also occur together. The function itself can easily be explained. It contains three pa­ra­me­ters: the con­di­tions, and two different outputs. The first output is output if the first parameter is true, otherwise the function plays the third parameter.

SASS

SCSS

In our example, the function checks whether the variable “$text-color” is set to black. In this instance (like the above example), the back­ground is displayed in white. In any other case, the CSS would set the back­ground to black. As you can see from this example, the branches are not nec­es­sar­i­ly suitable for designing an entire website. Both directive and function are primarily useful in mixins or partials. This allows the template to respond better to what happens in the final design for values. Con­verse­ly, if you already know that your text color is black, you don’t need to write a complex branch to make the back­ground white.

Functions have the property of re­pro­duc­ing a single value. For more complex re­quire­ments, use the “@if” directive. This also has the advantage that they can dis­tin­guish between more than two cases:

SASS

SCSS

The directive’s syntax the­o­ret­i­cal­ly allows you to create a case for each value provided. Make sure to follow the initial “@if” with the “@else” directive, which you can call as often as you want in com­bi­na­tion with “if.” Just the last “@else” remains free, you need to cover all other cases.

It also makes sense to add comments to the SASS source code. Through a mean­ing­ful com­men­tary, the document will remain com­pre­hen­si­ble for you and others in the future. Es­pe­cial­ly if you want to set up templates for other users, you help them with comments during editing. Many web designers also use comments to structure the code more clearly. Most pro­gram­ming and markup languages have the ability to insert text into the code that is ignored when compiling or parsing. This text is only of interest to humans, not computers.

Pro­gram­mers and web designers also use comments to explain their code: to do this, you place a block code that you do not currently need, but do not want to delete the source code for, in the cor­re­spond­ing comment markers.

Each language has a specific method for com­ment­ing out text. In SASS, you do this in two different ways. On the one hand, the same option is available to you as in CSS: /* */. Use this method to comment out several lines directly. You can often find comments in CSS or SASS, where each line in the comment block starts with an asterisk. However, this is just a con­ven­tion, not a necessity.

In addition to the method we already know from CSS, you can also comment out in­di­vid­ual lines in SASS with //:

The dif­fer­ence between the two methods is also that with the default settings the first variant is trans­ferred into the compiled CSS, while the second variant is simply lost. Either way, you should let a CSS document with comments in the code go online as a product version. To do this, use a minimized version that browsers can load faster.