SASS/SCSS Basics 2019

Hello Coders its Day 20 Round 2 of #100DaysOfCode #301DaysOfCode. Today I practiced using SASS/SCSS, using it locally, used nested feature, variables, extends, and mix ins.

Overall it is a much cleaner way to write CSS. Here is a brief summary of what I learned and the documentation.

What is SASS/SCSS?

SASS/SCSS is still CSS just with extra features like a JavaScript framework or ES6 arrow functions. It makes CSS code cleaner and more powerful.


Nesting is a powerful feature with using SASS it allows you to write in multiple selectors and elements be affected in the same bracket or code. It looks a lot cleaner in the code because you know exactly what it is affecting. For example if you had a header and you listed all of the changes in the headers <li> <ul> <nav> etc, you would see all of the style code inside of header easier.

(Here is the documentation for nesting)


Another powerful feature in SASS is using variables. Variables allow you to reuse code and essentially make your own framework. You are able to make your own framework if you have enough variables in the code.

All you need to do to create a variable is to add a $ in front of your selector. Variables are commonly used to affected multiple pieces of code and usually at the top of the CSS file.

(Here is the variable documentation)


Similarly to variables extends allows you to reuse code. However extends is usually used for CSS properties. The common example is to use this on buttons for its padding, margin, border, display, etc.

(Here is the @extend documentation)


Another powerful feature with SASS is using mixins. Similar to extend and variables it saves you from repeating code. However, this mixins are more similar to JavaScript functions. You are able to create a reusable styles with arguments.

(Here is the Mixin documentation).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: