The @extend directive in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors.
The @extend directive lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.
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:
Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance, and others. 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.
Do you like this gif? Check more gifs in the store.
Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left and to distribute collections of styles in libraries.
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”:
For sure you’ve noticed already that Sass makes CSS fun again. Today we’ll go a bit further with Sass Rules and we’ll go through the @import rule and Sass Partials.
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 Files
Just like CSS, Sass also supports the @import directive.
Sass Import Syntax:
@import filename;
You can import as many files as you need in the main file:
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”):
Nesting is combining different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors.
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: 8px 14px;
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: 8px 14px;
text-decoration: none;
}
You can nest properties in Sass, it is cleaner and easier to read than standard CSS.
Sass 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:
A CSS preprocessor is a program that lets you generate CSS from the pre-processors own unique syntax. There are many CSS preprocessors to choose to learn, however the most popular around right now the pre-processors is Sass.
Before you continue you should have a basic understanding of the following:
HTML
CSS
What is Sass?
Sass (short for syntactically awesome style sheets) is a style sheet language. Sass reduces the repetition of CSS and therefore saves time.
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.
How Does Sass Work?
A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.
Note: Sass files have the “.scss” file extension.
Sass Installation
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: https://sass-lang.com/install(I am working with the Koala app).
Sass Variables
Variables are a way to store information that you can re-use later.
With Sass, you can store information in variables, like:
Strings
Numbers
Colors
Booleans
Lists
Nulls
Sass uses the $ symbol, followed by a name, to declare variables:
Sass Variable Syntax:
$variablename: value;
The following example declares 3 variables named myFont, myColor, and myFontSize. After the variables are declared, you can use the variables wherever you want:
Note: I am working with the Koala app, and Adobe Dreamweaver CC HTML Editor, however, you can use any app and any HTML editor and it will work fine too.
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 (you don’t need to do anything in your CSS sheet):
body {
font-family: Helvetica, sans-serif;
font-size: 20px;
color: green; }
Sass Variable Scope
Sass variables are only available at the level of nesting where they are defined.