Sass Directives
Tags: sass, css, webdev, scss
Published: 2020-07-11 14:10:33

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] (https://dev.to/esraanasr92/sass-introduction-part-1-4o9b)

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


```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.

```CSS
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.



```css
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.

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

**How to use @mixin?**

By using  `@include`  

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

For the `@minix text{ }` examples:

```scss
.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
SCSS syntax
.button{
    font-size: 16px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
}

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



```css
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.