Getting started with Sass
In this tutorial, I will teach you the basics of sass (scss)
SASS stands for Syntactically Awesome Stylesheet and it is a preprocessor for CSS that lets you use additional features in your CSS stylesheets. It automatically compiles your .scss files into .css files for the browser to read. Some of these features include:- variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. Learn more about sass https://sass-lang.com/
Today, I will be teaching you how to use SCSS in your html application. I have previously taught you how to use SCSS with Nuxt.
Table of contents:-
- Installations
- Setting up scss with vscode -installing extensions and so on
Usage
For our usage, we will focus on the following:-
Variables
- Rule Nesting
- Sass import
- Sass mixin
- Sass extend
This is probably all you will use sass for. If you want to learn more, I encourage you to check out the sass-documentation
Installations
In order to use scss in our application, we have to install sass on our computer. To do this, run the following code in your vscode terminal, this should install sass globally.
npm install -g sass
Setting up scss with vscode
Browsers don't understand scss, so it need to be compiled down to basic css. To do this, we will enlist the help of a wonderful vscode extension. Note: I am working with vscode here.
- Live Sass Compiler (details below):- This extension will allow us compile our SCSS down to regular CSS.
Name: Live Sass Compiler
Id: ritwickdey.live-sass
Description: Compile Sass or Scss to CSS at realtime with live browser reload.
Version: 3.0.0
Publisher: Ritwick Dey
VS_Marketplace_Link: "https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass"
We will apply the following settings to the extension (in the settings.json
:-
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": './dist/css'
}
]
With these extensions configured, the extension will automatically generate a dist/css/
path and place your compiled CSS in it.
You can find more of the extensions configurations here -> live-sass-compiler-settings
Usage
Let's walk through scss :)
Sass variables
A variable is a store of information. It provides a container in which we can place values.
Syntax:
$variableName: value;
The $
tells the compiler that the text that precedes it is a variable.
The value
is what you wish to store.
You can use variables to store fonts, colors, sizes, and so on
$myFont: 'Poppins', Georgia;
$myColor: #000;
$mySize: 480px;
Variables are defined primarily at the top of your scss file or in a variable.scss
dedicated file.
Rule Nesting
Sass lets you nest css rules in a way that makes code more readable and enjoyable.
SCSS
nav {
height: 72px;
width: 100%;
background-color: transparent;
.logo {
width: 72px;
height: 72px;
}
}
Basic CSS
nav {
height: 72px;
width: 100%;
background-color: transparent;
}
nav .logo {
width: 72px;
height: 72px;
}
Sass compiles your code with nested rules, down to normal css that browser can understand.
Also, this is one I learnt recently. We can also nest CSS properties, for example :-
In SCSS
h1 {
font: {
family: sans-serif;
weight: 400;
size: 14px;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
}
In CSS
h1 {
font-family: sans-serif;
font-weight: 400;
font-size: 14px;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
}
That's insane :) In my opinion, SCSS is CSS with superpowers
SASS @import
SCSS emphasizes DRY (Don't repeat yourself). One way to not repeat yourself is to break down each element of your code into separate files and then import them at build time. Like CSS, SCSS also supports the @import
statement.
Your import statement should follow this structure,
First, create an scss file called, _variables.scss
.
And then in your main SCSS,
@import "variables";
The _
tells sass not to generate a new css file called variables.css
instead, it imports all the sass code from your variables file to your main file.
You do not need to specify the file extension.
Sass @mixin
Sass mixins allow you to create css code that can be re-used throughout your website. It is created using the @mixin
directive.
@mixin name {
property: value;
property: value;
}
To use this mixin, we use the @include
directive
selector {
@include name; // Where 'name' is the name of the mixin;
}
Sass @extend
The @extend
directive lets you share css rules from one selector to another. This best demonstrated by an example:-
.btn {
border: none;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.btn-danger {
@extend .button-basic;
background-color: red;
}
.btn-warning {
@extend .button-basic;
background-color: yellow;
}
After compilation, your css will be :-
.btn, .btn-danger, .btn-warning {
border: none;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.btn-danger {
background-color: red;
}
.btn-warning {
background-color: yellow;
}
That's SCSS, thank you for reading till the end.