Sass / Scss is a pre processor for css. A Preprocessor is something that unlocks CSS abilities that are not possible with normal CSS. Sass is not another type of style sheet but it helps the developer to organize their style sheets in the projects. The ultimate goal of Sass is to let the developer organize their stylesheet, making it dynamic and reusability possible, Sass allows the dev to combine multiple stylesheets into one. The syntaxes in Sass are easy.
These are the Concepts we will come across in this series
Mixins and variables.
functions and Nesting.
partial and importing.
decision-making and looping.
7 in 1 Pattern.
Compilation, Concatenation, and prefixing.
Setup and Installing
To Install and setup Sass for your project you need to be familiar with Command Line Interface (CLI) to run some commands
Folder Structure of Sass in a Project
sass-project (Project Folder)
|- sass (Sub Folder)
|- css (Sub Folder)
Whenever you are creating a directory/Folder for your project create two more folders inside the project folder named Sass and Css . Follow the same format whenever using Sass.
There are more files to be created in the Sass folder but for now, we will work only with one main.scss . We will Sass save our file with .scss i will tell u why in the further section for now it is enough. In the CSS folder create a file named anything thing but not have the headache of again and again changing the file name in the compilation command 😱 Quit confusing no worries you will get it as you go on deeper. So create a CSS file named style.css in which the compiled sass to css code is stored.
Now, you have to link yours style.css in your HTML document. No matter how many html docs you have in a project link the same one.
Example for the BoilerPlate to link StyleSheet
<!DOCTYPE html>
<html>
<head>
<title>Index page</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
</body>
</html>
Installing and initialization
To install Sass and initialize our project as an NPM project you need to have a node installed in your computer.
Why Initialize my project with NPM?
This will create a kind of environment for NPM and makes us (DEVELOPERS) ease to access the dependencies and packages we need in our project.
Command to init project with NPM:
npm -y init
you should run this command in your terminal after installing node.js on your computer. And run this command when the terminal is directed to the project folder
Example: C:/Documents/project>$npm -y init
Now we will install the node-sass package from npm to your project.
node-sass compiles our scss to css.
Command to install Node-sass:
npm install node-sass --save-dev
--save-dev this says that this package is installed and will be used for Development Purposes.
Setting up the compiler command:
we need to save a compiler script in a new command which will be used to compile the sass file. Copy the line mentioned below and add it to the scripts section/object of the package.json file which is created when the project was initialized with npm.
"compile-sass": "node-sass sass/main.scss css/style.css"
Till here whatever commands and initialization are run that is only done during the creation of the project and not repeated again.
Now we need to run the above command whenever we make changes in our scss File.
npm run compile-sass
This command runs the script which is stored as a value in the compile-sass key in the scripts object of the package.json. Every time you make changes first save the file and then run is command in the terminal. All the Sass to CSS code is compiled and stored in style.css the file. In the above value of compile-sass the key runs a command of node-sass where the source file (that is Sass) and destination file (that is CSS) is mentioned.
Now to monitor live changes use a live server you can know about it in this post of mine.
A lot more Interesting stuff is on the way.