Tutorial by Examples

When it comes to using SASS, there are multiple ways of setting up your workspace. Some people prefer to use command line tools (probably Linux people) and others prefer to use GUI applications. I'll cover both. Command Line Tools The 'Install SASS' page at sass-lang.com covers this quite well. ...

If you have a value that you use often, you can store it in a variable. You could use this to define color schemes, for example. You would only have to define your scheme once and then you could use it throughout your stylesheets. To define a variable, you must prefix its name with the $ symbol. (L...

Let's assume the following scenario: You have two stylesheets: _variables.scss and layout.scss. Logically, you keep all your variables inside your variable stylesheet but want to access them from your layout stylesheet. NOTE: You may notice that the variables stylesheet has an underscore ('_') be...

layout.scss nav { ul { margin: 0; padding: 0; list-style: none; li { margin: 0 5px; } } } output nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { margin: 0 5px; }

SASS supports two types of comments: Inline comments - These only span one line and are usually used to describe a variable or block. The syntax is as follows: // Your comment here (you prepend it with a double slash (//) and the rest of the line is ignored by the parser. Multiline comment...