Have you ever wished there was a faster way to write CSS (Cascading Style Sheet)? Or had 1000s of CSS code and found it difficult to maintain ?
Well, there is an Awesome tool I've been using called Sass (Syntactically Awesome Style Sheets) which gives you superpowers when writing CSS. Trust me, it's Awesome.
What's Sass : Syntactically Awesome Stylesheet Language
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.
From wikipedia :here
Hmm, from the definition of Sass you might think it seems complex, but no it isn't really, well there will be some new syntax to get use to.
The reason why Sass interprets or compiles into Cascading Style Sheets (CSS) is because the Web browser only understands Cascading Style Sheets (CSS) and can't read/interprete Sass.
Now, lets look at the Awesome features Sass offers that doesn't exist yet with CSS :
- Variables, Nesting, Mixins, Inheritance, Partials, Modules, Operators and so on.
Clearing up the differences between "Sass" and "SCSS"
You might have probably heard of "SCSS" or not. Well, "SCSS" (Sassy CSS) uses block formatting like CSS. It uses curly braces to denote code blocks {...} and semicolons to separate rules within a code block .element { color: red; }. SCSS also support all valid CSS stylesheet rules unlike Sass. Also, ends with .scss extension.
Meanwhile, "Sass" doesn't make use of curly braces and semicolons but makes use of indentation when writing. Also called (The Indented Syntax) and ends with .sass extension.
Both "Sass" and "SCSS" syntax are referred to as Sass, since that's the general name, but the most popularly extension is "SCSS" (.scss).
For this article I'll stick to "SCSS' syntax of writing.
Here's an example to demonstrate my point
SCSS
main {
h2 {
color: #000;
}
}
Sass
main
h2
color: #000
It's totally up to you to choice what style of writing you prefer, that being said lets look at the Features of Sass.
Variables
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store colours, font name basically any CSS value you want to reuse.
I know! I know! Variables already exist in plain CSS but the method (symbol) of writing is different take a look below.
SCSS
$color: #000000;
p {
color: $color;
}
CSS way of declaring variables and used
:root {
--blackcolor: #000000;
}
p {
color: var(--blackcolor);
}
SCSS supports the use of :root but Sass doesn't cause not all CSS rules are valid in Sass.
Just looking at Sass way, isn't it much faster to write?
Nesting
This's one of my favourite feature from Sass, Sass allows you nest multiple CSS selectors just like HTML. But beware, overly nested rules (CSS selectors) could be hard to maintain later on and considered bad practice.
SCSS
nav {
ul {
margin: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: line-through;
color: #000;
}
}
CSS
nav ul {
margin: 0;
}
nav li {
list-style-type: none;
}
nav a {
text-decoration: line-through;
color: #000;
}
With Sass, we don't have to repeat nav three times, since it's the parent Selector.
Parent Selector
Parent Selector helps to shorten a parent selector name (as the name suggest 🙃), when it's to be used. It uses a symbol & ampersand. You could also think of & as the current selector context.
The parent selector works beautifully with BEM naming.
Example
SCSS
.parent {
margin-top: 2em;
&__child1 {
color: red;
}
&__child2 {
color: blue;
}
}
CSS
.parent {
margin-top: 2em;
}
.parent__child1 {
color: red;
}
.parent__child2 {
color: blue;
}
Parent Selector also helps with reducing nested chains of Selectors.
If the SCSS file was written like this :
SCSS
.parent {
margin-top: 2em;
.parent__child1 {
color: red;
}
.parent__child2 {
color: blue;
}
}
CSS
.parent {
margin-top: 2em;
}
.parent .parent__child1 {
color: red;
}
.parent .parent__child2 {
color: blue;
}
From the CSS example above, you can see why the Reference Selector is important and doesn't cause over nested chains but it's all up to you though.
Extend / Inheritance
Here's another awesome feature that makes use of % then a name assigned.
%extendPropertyName
It basically allows sharing set of CSS properties to multiple selectors making your Sass stylesheet DRY (Don't Repeat Yourself) as much as possible. You could also think of it as a placeholder.
In order to call or use a declared extended placeholder, you have to use the @extend rule.
Example
SCSS
%btn {
padding: 0.5em 1em;
border: 2ps solid black;
text-transform: uppercase;
&:hover {
background: #000;
color: #fff;
}
}
.primaryBtn {
@extend %btn;
background: green;
}
.secondBtn {
@extend %btn;
background: blue;
}
CSS
.primaryBtn, .secondBtn {
padding: 0.5em 1em;
border: 2ps solid black;
text-transform: uppercase;
}
.primaryBtn:hover, .secondBtn:hover {
background: #000;
color: #fff;
}
.primaryBtn {
background: green;
}
.secondBtn {
background: blue;
}
Partials
Here's another cool feature of Sass and it really brings maintenance to the table of using Sass.
Just like you would create an about.html page on your website, linked to the default page index.html, you could also do something similar with Sass.
In this case, the Sass file you want to be linked or imported to your main Sass file begins with _ (as in _filename.scss) and are not compiled until it's imported to the main stylesheet style.scss (which doesn't include the hyphen).
Example is at the Modules Section.
Modules
This is when you have multiple partials (_filename.scss)'s and you want to bring them together into a single Sass file (style.scss) for it to be compiled into a CSS stylesheet.
You might wonder, why break my files into parts (partials)?
It's a good practice because it will be easier to maintain and navigate, instead of scrolling all the way up to look for a selector then scroll down to continue coding you could just navigate through different partials.
If there an error in a partial file, Sass compiler or interpreter tells you there an error so, it easier to debug.
Also, the main Sass file (style.scss) will have access to the variables, mixins, functions declared in the partial (_filename.scss) file when imported to the main Sass file (style.scss).
Hope this explains my point to your understanding, if not there is a link to a video that breaks down these point further.
In other to import into the main Sass file style.scss the @import rule is used.
Example :
SCSS
// _base.scss file
$color-red: red;
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
SCSS
// style.scss (main scss file)
@import "base';
h1 {
color: $color-red;
}
CSS
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: red;
}
Note : When Sass imports a file, that file is evaluated as though its contents appeared directly in place of the @import. Any mixins and variables from the imported file are made available, and all its CSS is included at the exact point where the @import was written. What’s more, any mixins, functions, or variables that were defined before the @import (including from other @imports) are available in the imported stylesheet.
Mixins
Mixin are like functions in and programming language but without returning anything. It allows grouping of CSS declarations which can be reused when called also it takes in values, just like a function.
Have you ever wished there were a way to speed up creating a pseudo element, without retyping shared styles? You could speed up the process this way
SCSS
@mixin psedo($pos, $top, $right, $bottom, $left) {
content: "";
display: block;
position: $pos;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
.selector {
@include psedo(absolute, null, null, 20px, 40px);
}
// null simply means don't add in this case (be empty) and it doesn't show in the CSS stylesheet
CSS
.selector {
content: "";
display: block;
position: absolute;
bottom: 20px;
left: 40px;
}
Hope you're excited seeing the features above, there a lot more features that I won't cover but with the ones above, it should get you started Sass.
Here's an embedded Sass code you could play with, nothing fancy.
How to get Sass running on Visual Studio Code
Make sure you have Visual Studio Code installed already, if not click here
Click on the Extension Panel or (Ctrl + Shift + X)
In the search bar, type in Live Sass Compiler then install it.
Reload Visual Studio Code to get everything setup
Create a style.scss file (if you prefer .sass, follow the same process)
To compile your Sass file to CSS, click on Watch Sass on the Status Bar
Doing this will create a style.css file that can be linked to the index.html file. Note: Don't make changes to the style.css file cause it will get overwritten each time you save the style.scss file.
Voila!, that's all you need to do to get Sass up and running.
For more details on Sass check out this video by Brad Traversy
By the way, If you're wondering why I didn't continue my series on Javascript: The Hard Parts, I just felt I should take a break from writing about JS and write about something else 😉.
Thanks for Reading
If you'd like to contact me I'm active on Twitter. Bye for now, see you later.
