What is Sass?
Sass stands for Syntactically Awesome Style sheet
It's an extension to CSS, a CSS pre-processor, and compatible with all versions of CSS.
Before starting you should have HTML and CSS basics knowledge.
A browser doesn't understand Sass code. So, we need to convert it into standard CSS.
Why use Sass?
To reduce the repetition of CSS and save time. If you using large stylesheets it'll be hard to maintain.
You can imagine having a large stylesheet with background-color: #4CAF50; and you want to change this value. you'll need to change everywhere manually. But if you use Sass you can change it one time.
.navbar{
background-color: #4CAF50;
color: #ffffff;
border-color: #4CAF50;
}
.info-block {
background-color: #d4edda;
border-left: none;
padding: 32px;
margin: 24px;
margin-left: -32px;
margin-right: -32px;
}
.bottom{
background-color: #4CAF50;
color: #ffffff;
}
Tips:
Install sass using NPM: npm install -g sass
Check Sass version: sass --version
Use the command line to convert scss file to css: sass main.scss main.css
Watch changes: sass --watch main.scss:main.css
Let's start learning Sass together step by step:
Sass Features:
Nested Rules
Variables
Inheritance
Conditions & Loops
Helper Functions
Mixins
Partials
For first feature "Sass Nested Rules"
SCSS Syntax:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
CSS Output Syntax:
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 Variables
Variables allow us to define the rest of the variables to reuse them on code. We can store value in variables type:
ex: $variableName: value;
string
number
color
booleans
lists
null
Sass variables scope
Sass variables are only available at the level of nesting where they are defined.
h1{
font-size: $myFontsize;
}
CSS Output
h1{
font-size: 18px;
}
Sass !global
we can override the scope variable by using !global
$myFontSize: 18px;
h1{
$myFontSize: 20px !global;
font-size: $myFontSize;
}
p{
font-size: $myFontSize;
}
CSS Output
h1{
font-size: 20px;
}
p{
font-size: 20px;
}
For more information about Sass. or feel free to ask me.
Top comments (0)