Introduction
Sass is a CSS pre-processor.
Sass reduces repetition of CSS and therefore saves time.
- Example
/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use the variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
- What is Sass?
- Why use Sass?
Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
- System requirements for Sass
- Install Sass
Applications
There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps:
Command Line
When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files. For example:
sass source/stylesheets/index.scss build/stylesheets/index.css
First install Sass using one of the options below, then run sass --version to be sure it installed correctly.
If you use Node.js, you can install Sass using npm by running:
npm install -g sass
Variables
Variables are a way to store information that you can re-use later.
With Sass, you can store information in variables, like:
Sass uses the $ symbol, followed by a name, to declare variables:
Sass variable syntax:
$variablename: value;
The following example declares 4 variables named myFont, myColor, myFontSize, and myWidth. After the variables are declared, you can use the variables wherever you want:
SCSS Syntax:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and outputs normal CSS with the variable values placed in the CSS, like this:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
- Sass variable scope
Sass variables are only available at the level of nesting where they are defined.
Look at the following example:
SCSS Syntax:
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
Will the color of the text inside a <p> tag be red or green? It will be red!
The other definition, $myColor: green; is inside the <h1> rule, and will only be available there!
So, the CSS output will be:
h1 {
color: green;
}
p {
color: red;
}
Ok, that is the default behavior for variable scope.
- Using Sass !global
The default behavior for variable scope can be overridden by using the !global switch.
!global indicates that a variable is global, which means that it is accessible on all levels.
Look at the following example (same as above; but with !global added):
SCSS Syntax:
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
Now the color of the text inside a <p> tag will be green!
So, the CSS output will be:
h1 {
color: green;
}
p {
color: green;
}
Nested rules and properties
- Nested rules
Sass lets you nest CSS selectors in the same way as HTML.
Look at an example of some Sass code for a site's navigation:
SCSS Syntax:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector.
While in CSS, the rules are defined one by one (not nested):
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Because you can nest properties in Sass, it is cleaner and easier to read than standard CSS.
- Nested properties
Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow.
With Sass you can write them as nested properties:
SCSS Syntax:
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
The Sass transpiler will convert the above to normal CSS:
font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: center; text-transform: lowercase; text-overflow: hidden;
@import and partials
- @import
Sass keeps the CSS code DRY (Don't Repeat Yourself). One way to write DRY code is to keep related code in separate files.
You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc.
- Importing files
Just like CSS, Sass also supports the @import directive.
The @import directive allows you to include the content of one file in another.
The CSS @import directive has a major drawback due to performance issues; it creates an extra HTTP request each time you call it. However, the Sass @import directive includes the file in the CSS; so no extra HTTP call is required at runtime!
Import syntax:
@import filename;
Tip: You do not need to specify a file extension, Sass automatically assumes that you mean a .sass or .scss file. You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file.
You can import as many files as you need in the main file:
@import "variables"; @import "colors"; @import "reset";
Let's look at an example: Let's assume we have a reset file called "reset.scss", that looks like this:
SCSS Syntax (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
and now we want to import the "reset.scss" file into another file called "standard.scss".
Here is how we do it: It is normal to add the @import directive at the top of a file; this way its content will have a global scope:
SCSS Syntax (standard.scss):
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
So, when the "standard.css" file is transpiled, the CSS will look like this:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
- Partials
By default, Sass transpiles all the .scss files directly. However, when you want to import a file, you do not need the file to be transpiled directly.
Sass has a mechanism for this: If you start the filename with an underscore, Sass will not transpile it. Files named this way are called partials in Sass.
So, a partial Sass file is named with a leading underscore:
Sass partial syntax:
_filename;
The following example shows a partial Sass file named "_colors.scss". (This file will not be transpiled directly to "colors.css"):
_colors.scss:
$myPink: #EE82EE; $myBlue: #4169E1; $myGreen: #8FBC8F;
Now, if you import the partial file, omit the underscore. Sass understands that it should import the file "_colors.scss":
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
@mixin and @include
The @mixin directive lets you create CSS code that is to be reused throughout the website.
The @include directive is created to let you use (include) the mixin.
- Defining a mixin
A mixin is defined with the @mixin directive.
Sass @mixin syntax:
@mixin name {
property: value;
property: value;
...
}
The following example creates a mixin named "important-text":
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Tip: A tip on hyphens and underscore in Sass: Hyphens and underscores are considered to be the same. This means that @mixin important-text { } and @mixin important_text { } are considered as the same mixin!
- Using a mixin
The @include directive is used to include a mixin.
Sass @include mixin syntax:
selector {
@include mixin-name;
}
So, to include the important-text mixin created above:
.danger {
@include important-text;
background-color: green;
}
The Sass transpiler will convert the above to normal CSS:
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
A mixin can also include other mixins:
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
- Passing variables to a mixin
Mixins accept arguments. This way you can pass variables to a mixin.
Here is how to define a mixin with arguments:
/* Define mixin with two arguments */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call mixin with two values
}
.myNotes {
@include bordered(red, 2px); // Call mixin with two values
}
Notice that the arguments are set as variables and then used as the values (color and width) of the border property.
After compilation, the CSS will look like this:
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
- Default values for a mixin
It is also possible to define default values for mixin variables:
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
Then, you only need to specify the values that change when you include the mixin:
.myTips {
@include bordered($color: orange);
}
- Using a mixin for vendor prefixes
Another good use of a mixin is for vendor prefixes.
Here is an example for transform:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
After compilation, the CSS will look like this:
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
@extend and inheritance
The @extend directive lets you share a set of CSS properties from one selector to another.
The @extend directive is useful if you have almost identically styled elements that only differ in some small details.
The following Sass example first creates a basic style for buttons (this style will be used for most buttons). Then, we create one style for a "Report" button and one style for a "Submit" button. Both "Report" and "Submit" button inherit all the CSS properties from the .button-basic class, through the @extend directive. In addition, they have their own colors defined:
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
After compilation, the CSS will look like this:
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
By using the @extend directive, you do not need to specify several classes for an element in your HTML code, like this: <button class="button-basic button-report">Report this</button>. You just need to specify .button-report to get both sets of styles.
The @extend directive helps keep your Sass code very DRY.