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.
Top comments (0)