loading...

Sass; CSS Made Easy

obizim profile image Obi Zim Updated on ・3 min read

Sass is a CSS extension language. A CSS preprocessor which totally gives our CSS superpowers. Once you get to understand how it all works, you would rarely write plain CSS again.
Before we continue, you should know that Sass has two syntax; The Indented syntax and The SCSS syntax.

  • The Indented syntax which uses the file extension, ‘. sass' supports the same features as SCSS syntax but the difference is that it uses indentation. There are other minor differences but I won’t be going into that.

  • The SCSS syntax which uses the file extension, ‘. scss’ is a superset of CSS. It basically means that all valid CSS is valid Scss. It’s the easiest syntax to get used to and also the most popular. The features that using sass offers makes it fun to write CSS and with less stress too. Some of the features include:

Variables: Yeah, we all know that you can create variables in the modern CSS now but Sass variables have been long there before the main CSS Variables. The thing about Sass variables is that they don’t compile to CSS variables rather they compile to the actual values set for them. You can set an SCSS variable as shown in the code snippet below.
Alt Text
When you add it to an element, it compiles to CSS with the actual value of the variable, that is red.

Nesting: This is another awesome feature that Sass provides as it helps for awesome specificity. Here you can nest the styles of elements inside the parent element. Let me show you an example:
Alt Text
The header has a child element of p. With SCSS, you can nest the stylings as shown above. Instead of the p element to be separate, it is placed inside the .header class. This helps with specificity in such a way that the p element styling only affects the p element inside the header element and won’t affect all the p element in the whole page.

Mixins: One of the great features of Sass. This helps to avoid repetition in your SCSS file. It is used with an annotation (@ sign) in front then the name of your mixin. For instance: you might have many elements in your HTML that requires “display: flex; align-items: center; justify-content: center “for the styling, You wouldn’t want to be repeating them all the time and that is where the use of mixin comes in.
Alt Text
With this, you can see this is not enough. The mixin needs a way to be accessed in order for them to work. For that, we use the “@ include“ method to include them in our styles.
Alt Text
With this, the whole properties added in the mixin will be included in the header class and you don’t have to write all the properties out all the time.

There are a lot of other features that makes Sass super fun to use like functions, use of partials to import one scss file to another. But I would strongly recommend learning and knowing how to use plain CSS as it will help you understand the use of Sass easily.

You might just check the Sass site to read the docs and grasp the whole thing well enough or check out FreeCodeCamp's tutorial on Sass where you get to build one project from the course to understand better.

Remember: ALL VALID CSS IS VALID SCSS.

Posted on by:

Discussion

markdown guide