Your very first Sass project !! What is Sass? How to use it ?
Well honestly it’s been sparkling a lot lately (even in the image 😉) and has become the talk of the town which rings a bell reminding me that it’s an ARTICLE time . Hey coders I see you have stumbled upon the perfect resource, In this very Article we are gonna discuss what is Sass?, Why use it ?, How to use it? ,Diff between SCSS & SASS? and what not, so make sure to stick around till the end 😎
Prerequisites: 1) Make sure you have nodejs & npm installed, pretty simple procedure .here
2)Basic HTML/CSS knowledge
What is SASS and Why should we be talking about it ?
You can think of SASS as a programming language, technically it is a scripted language, As you might have heard of CSS used for styling but what if we could use variables, functions, mixins, imports etc with it. So SASS basically does that, it empowers CSS with these features , All you need to do is create a SASS file and start coding. So do we link the SASS file to our HTML file ?, No you don’t actually, you need to convert your SASS file into CSS code using a compiler, In this case we are gonna use node-sass for the same (more compilation process shortly)
Sass facilitates you to write clean, easy and less CSS in a programming construct. It contains fewer codes so you can write CSS quicker. It is more stable, powerful, and elegant because it is an extension of CSS.
Diff between SCSS and SASS?
Well there is a war out there discussing the same, but to be honest we can pick any of them, i wont go too deep into this fight but the major difference here can be depicted with a simple image
SCSS and SASS has major difference in their indentation, we use brackets and semicolons in SCSS whereas SASS uses indentation to depict the same, In this article we are gonna use SCSS
Let’s get our hands dirty😁 !!
Create a directory, inside create a html file and css file, link the css file with the html file using <link> tag,
home.html (*linking the css file*)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title><link rel="stylesheet" href="./home.css" /></head><body><h1>Hello world</h1></body></html>
Navigate into the directory and run a simple command npm init -y this will create a package.json file inside the directory, this command will initialise npm so that you can use third party external libraries
Let’s install node-sass this will act as out CSS compiler that will convert out SCSS code to CSS, inside the same directory run command npm install node-sass to install it, in the same directory create a main.scss file, this file will contain all your SCSS code which will get compiled and converted into CSS into our linked CSS file
Open package.json file and update the scripts section as below
{"name": "homepage","version": "1.0.0","description": "","main": "index.js","scripts": {"compile:sass": "node-sass ./main.scss ./home.css -w"},"keywords": [],"author": "","license": "ISC","dependencies": {"node-sass": "^7.0.1"}}
What you did right now was create a npm script that will use node-sass package to convert SASS code from main.scss to CSS into home.css the -w option says that after each save in main.scss do the compilation process (so you don’t need to re-run the command)
Next time before you write your SCSS code make sure to run that command so that you spin up the compiler because in the end you are linking your CSS file remember not SCSS file .
Let’s write some SCSS !!
Now that we have all our setup ready it’s time for the action, Open your main.scss file and create a variable .
main.scss
$color-gray: #f7f7f7;h1 {
background-color: $color-gray;
}
// this is a comment
color-gray is a variable that contains a colour code ,now whenever you wanna use that colour you can use that variable, you can also create a comment as depicted
Nesting
Navigating has become super easy and readable in SCSS, lets say you wanna style a p tag which is inside some div with class .mydiv this is an easy example but you know how long the hierarchies could go.
.mydiv {
p { // your styling for p tag goes here
color: pink; }
}
The Sass Ampersand &
The `&` gives out the current location in the entire hierarchy just to make some styling easier we’ll take the same example as above, let’s add and :hover pseudo class to p tag
( the :hover pseudo class adds the mentioned styles whenever you hover over that element)
.mydiv {
p { // your styling for p tag goes here
color: pink;
// & will resolve to address of p tag and than :hover will be added as you see
&:hover {
font-style: italic ;
} }
}
you can add pseudo elements like ::after or. ::before or other pseudo classes same way .
Mixins
Mixins are somewhat like functions in normal programming languages, there is not direct comparison though both have their own place their own use cases. Below is a way you can create a mixin , main.scss
$color-gray: #f7f7f7;
$color-pink: rgba(255, 192, 203, 0.932);h1 {
background-color: $color-gray;
}@mixin change-style($passed-color) { color: $passed-color;
font-weight: 700;
font-size: 24px;
letter-spacing: 3px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;}// this is a comment
.mydiv { p { // your styling for p tag goes here
background-color: transparent;
// include mixin
@include change-style($color-pink); &:hover {
font-style: italic;
}
}}
You can see in the code the syntax for creating a mixin also the way we include it, now when the SCSS compiles the include line will be replaced with the actual code inside the mixin and that’s how to styling gets applied
you can include mixin at any block of your code multiple times, you could even pass arguments while including mixins, this will save you a lot of time copying and pasting CSS around, now you actually see the actual power of using SCSS
Meanwhile if you ever open your CSS file you can actually see the code that gets compiled by the node-sass package that we installed
Functions
Talking about the functions, the main job of a function is whenever it gets called it will do some computational tasks and return the value, mixins are for adding styling when included but functions are for getting your value based on any calculations, In a nutshell
You wanna add dozens of lines of CSS code on multiple places you use mixins
You wanna calculate a colour value based on some mathematical formula or perform some maths operations on it and get the calculated result in return you use functions, its that easy , main.scss
@function divide($a,$b){
@return $a/$b;
}
div{
margin: divide(50,2) * 1px ;
}The above code shows how to create and use a function , the reason i have multiplied the result with 1px is , the returned result doesn’t have a unit and margin css property expects a unit , so i have multiplied it with 1px
Extending
You can extend your css blocks to add styling code using this extending feature, there is one small difference between mixins and extending i.e mixins will add that css wherever you include it once compiled, but extending will add the code by creating a different block with that same address and add the code inside that new block, You can see the difference by observing the compiled code
%layouts {padding: 5px;display: inline-block;height: 50px;}// this is a comment.mydiv {
p { // your styling for p tag goes here
background-color: transparent; // extending
@extend %layouts;
&:hover {
font-style: italic;
}
}}
Compiled CSS
.mydiv p {padding: 5px;display: inline-block;height: 50px; }.mydiv p {background-color: transparent;color: rgba(255, 192, 203, 0.932);font-weight: 700;font-size: 24px;letter-spacing: 3px;font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; }.mydiv p:hover {font-style: italic; }
If you look at the compiled CSS it created a separate block at address .mydiv p {}, now we have 2 blocks for the same, if it was mixin it would have just added the code in the existing block instead of creating new like extends did .
Importing
You can create different SCSS files and import it inside main SCSS file at the end , All you have to do is use @import fileName.scss in main.scss, its that easy
There are many other features for SCSS you can check them out here, That’s it for today guys thanks for sticking out till the end, Now leaving such a concise article with an exceptional explanation without a token of gratitude really pisses my stats off, Your one like means the world to me✨ so just hit it, I keep writing tech stuff so make sure to follow me on😎 medium, Twitter, Insta, Checkout my personal website for more about me, till then see you in the next one 👋.
