Sass stands for Systematically Awesome Style Sheets. It is a CSS pre-processor. It is an extension of CSS that is used to add power and elegance to the basic language. It facilitates you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax. Sass is more stable and powerful CSS extension language that describes style of document cleanly and structurally. It is very useful to handle large style sheets by keeping them well organized and running quickly small style sheets.
Features of Sass
Read more about Sass at the official Sass web site: Sass
Variables are a way to store information that you can re-use later.
With Sass, you can store information in variables, like:
Synatx: $variablename: value;
Sass variables are only available at the level of nesting where they are defined.
Using Sass !globalThe 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.
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;
}
}
Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow.
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.
Sass Importing FilesJust 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!
Sass Import Syntax: @import filename;
Example: @import "variables";
@import "colors";
@import "reset";
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:
_filename;
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.
A mixin is defined with the @mixin directive.
Example:
@mixin name {
property: value;
property: value;
...
}
Using a mixin
The @include directive is used to include a mixin.
Example:
selector {
@include mixin-name;
}
Passing a Variable to Mixin
Mixins accept arguments. This way you can pass variables to a mixin.
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.
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.