Sass Directives

Hi guys,

in this post, we'll talk about sass Nesting, @import, @mixin, and @extend

If you want to know what is sass and why we use it? read it

Before starting you should know:

Sass keeps the CSS code DRY (Don't Repeat Yourself)

Sass Nested Rules

Sass lets you nest CSS selectors in the same way as HTML.

Examples: for menu CSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}


CSS Output

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass Nested Properties

Many CSS properties have the same prefix, like font-family and font-size or text-align and text-overflow.

SCSS Syntax
font: {
    family: 'Lato', sans-serif;
    size: 20px
}

text:{
    align: right;
    overflow: hidden;
}

CSS Output
font-family:'Lato', sans-serif;
font-size: 20px;

text-align: right;
text-overflow: hidden;

Sass @import

Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixin, functions and variables and combining multiple stylesheets' CSS together.

But the difference between CSS @import and Sass.

CSS @import requires the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation.

SCSS syntax (style.scss)

html, body{
    margin: 0 auto;
    padding: 0;
}

SCSS Syntax (standard.scss)
@import "style";
body{
    background: #ccc;
    font-size: 16px;
}

CSS Output
html, body{
    margin: 0 auto;
    padding: 0;
}
body{
    background: #ccc;
    font-size: 16px;
}

Tips: There's no need to specify a file extension.

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.

Sass Mixins

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.

SCSS syntax
@mixin text{
    font-size: 18px;
    color: #cf649a;
    text-align: center;
}

How to use @mixin?

By using @include

selector{
    @inclide mixin-name (ex: text);
}

For the @minix text{ } examples:

.text-header{
    @include text;
    border-bottom: 1px solid #ccc;
}

CSS Output
.text-header{
    font-size: 18px;
    color: #cf649a;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

Sass @extend

The @extend directive lets you share a set of CSS properties from one selector to another.

SCSS syntax
.button{
    font-size: 16px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
}

.button-submit{
    @include .button;
    background: #cf649a;
}

CSS Output
.button, .button-submit{
    font-size: 16px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
}

.button-submit{
    background: #cf649a;
}

Tip

By using the @extend directive, you do not need to specify several classes for an element in your HTML code.