Resources
Video tutorial: Learn Sass in 20 minutes
Online tutorial
Preprocessing: Install conversion plugin
Given that the browser itself cannot read Sass, you have to compile your Sass to css. This is where Live Sass Compiler comes into play. Find the plugin on your VS Code and get it installed. When install completes, you may find its icon at the lower-right corner. Each time you kick into Sass editing, click the icon to get it run.
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS fiel that you can use in your website.
Nifty goodies Sass can do
Minify coding efforts across different browsers
Just type display: flex. Sass immediately enables your page to best fill the available space at the cost of a minimum of difficulty.
display: flex;
This approach applies to all the other CSS properties that might not work cross browsers.
What is flex?
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknow and/or dynamic (thus the word ‘flex’).
Click HERE if you like to expand your knowledge base around Flexbox.
Variables
You no longer have to bother yourself changing the same properties for different elements one after another. Store information you want to reuse in variables. The following is an example.
Step 1: Declare a variable
Use the symbol $ to make something a variable.
$primaryBtn : rgb(146, 56, 124);
$textColor: rgb(43, 43, 43);
Step 2: Reuse a variable all through the sass
header {
...
button {
background: $primaryBtn;
}
}
.contact button {
background: $primaryBtn;
}
By doing so, you can change the background color by editing the variable alone, rather than going all through the file.
Nesting
Have styling definitions nestled within ancestors, just like what they appear in html hierarchies. What if you’d like to define a focus or a hover? Not to worry. Precede the normal css expression with the symbol &, for example, &:hover, &::after, you get it.
header {
background: lightblue;
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
color: $textColor;
button {
background: $primaryBtn;
&:hover {
background: red;
}
&::after {
content: "Hello~"
}
}
}
Segmenting
A css file normally is comprehensive of all the elments through your web page. With sass, you may divide your styling into as many segments as you wish.
Build a segment
Define the necessary properties in a separate file. Note that its name should start with an underscore _, for example, _header.scss.
Import segments into the primary styling bank
sass knows how to go about the integration. This increases the readability of your styling files.
@import './header';
Mix-ins: Allowing functions
Step 1: Definition
Name your mix-in function and specify the properties.
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
Step 2: Referenciing
@ include the mix-in function name to make quotations.
header {
...
@include flexCenter();
...
}
...
.contact {
@include flexCenter();
}
Step 3: Passing parameters
You may even pass aguments into a function to allow changes.
-
Use a variable which starts with a dollar sign, which is the parameter. And relate it to the property that shall change based on the argument you pass in.
... @mixin flexCenter($direction, $background) { ... flex-direction: $direction; background: $background ... } ... -
Now you may actually pass an actual argument into the function. Different values result in different stylings.
header { @include flexCenter(column, red); } ... contact { @include flexCenter(row, green); }
Extentions
Sass’s extention capability enables elements to inherit all the properties of another element. Use @extend and specify the name of the element you want to make a copy, for example:
contact {
@extend header;
}
If you want to overwrite a particular property among the existent ones, define it below the @extend line.
contact {
@extend header;
background: lightcoral;
}
Do operations
This is super obvious from its name.
width: 100% - 20%;
