Guide in Learning Scss

Note: This post was first written on iamjude.xyz

As a Frontend Developer, I have been writing a whole lot of CSS to give my Frontend application that super look because there is no Frontend Web Application without CSS. So, today i will be talking about one of the coolest ways of Styling with "SCSS"

Before we proceed in much details i would like to draw your attention to what SCSS is and how we can further use it while building our applications.

Note: This article is not fully for people that want to try SCSS with frontend frameworks and libraries like Reactjs, Vuejs and the rest, but will give you the basic knowledge on what SCSS is, how it works which will further help you if you want to use it on React or Gatsby

UnderStanding SCSS

It won't be right if i don't explain what SCSS is ☺️, so let us do justice to that.

SCSS is the main syntax for Syntactically Awesome Style Sheet (SASS) which builds on top of the CSS existing syntax. Maybe I have said something too hard to understand, so let me explain better

SASS is a pre-processor scripting language that will be compiled and interpreted into CSS in order to be understood by the web. SASS is the super-set of CSS and SCSS is a syntax to write SASS which is more advanced than the normal CSS.

Why you will Love writing SCSS:

SCSS helps shorten your styling Codes

It contains all CSS features and even more

It allows nesting of codes which is super awesome

Allows you easily modify, edit your codes from one source by the use of variables.

With all these features and more i know you are already making up your mind to move to write SCSS in all your web applications.

I don't think this article will be what you wanted without adding some code samples to show you exactly what you can do with SCSS

Getting into SCSS Proper For Html applications
With Frontend FrameWorks like React, Gatsby, Vue and the rest, you can use SCSS by simply installing the plugin and maybe 1 or 2 settings to get it working for your app but in my illustration, I won't go into that rather i will show you how to do that on HTML applications without any frameworks.

Please🙏🏼: you have to pardon me because i will be using VsCode for my illustration.

On your VsCode editor, install Live Sass Compiler: this extension helps you to compile your sass or scss codes to CSS which the web (Browser) totally understands

you can create your style folder and create your style file with the extension of .scss

eg: main.scss

you can write your scss codes like this

.container{

     max-width: 1100px;

     width: 100%;

}

SCSS variable feature: you can declare a variable in scss which helps you to quickly modify your styles from just one place and it will take effect in the rest of the places. Here is how you will do that

$fontName: Helvetica, sans-serif;

$primaryColor: #fff;

$smallFont: 14px;

SCSS nesting feature: you can nest styles in the same block using SCSS, you can do that like this

.section-block{

     display: flex;

     font-family: $fontName; (Using the variable we have declared)

     color: $primaryColor;

@media (max-width: 480px) { 
     .section-block { font-size: $smallFont; }
}
}

SCSS import feature: using SCSS you enjoy the feature of the modern web way of importing files that you can't do on normal CSS.

Assuming you have another styling file you would want to import to your main.scss, you have to do it like this

*{   

     box-sizing: border-box; 

     margin: 0 auto;    padding: 0;

}

.container {

     max-width: 1100px;

     width: 100%;
}

@import './nav'; /*(This is an scss file containing the header styling and that's we import it)*/

.section-block{

     display: flex;

     font-family: $fontName;

     color: $primaryColor;

@media (max-width: 480px) {
    .section-block { 
      font-size: $smallFont; 
    }
 }
}

So, I have been showing code samples without showing you how to make your Scss files working on the web.

To do this

You have to click the "Watch Scss" beneath your VsCode editor

After that, the Live Sass Compiler will create a .css file for you which you have to add to the HTML file.

Whoa!! I hope this article helps you get started understanding and using Scss. If you would love to know more about SASS, check it out here If you need help, you can get me through the comment section. See you in the next article 👋