Back to Home

Introductory Guide in Learning Scss

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 most coolest way of Styling with "SCSS".

Before we proceed in much details of what i am trying to achieve, 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 wants 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 and how it works.

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:

1. SCSS helps shorten your styling Codes

2. It contains all CSS features and even more

3. It allows nesting of codes which is super awesome

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

With all this features and more i know you are already making up your mind to move to writing 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.

1. 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

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

eg: main.scss

3. 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 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 which you can't 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

1. You have to click the "Watch scss" beneath your vsCode editor

mua

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

mua

Whoa!! I hope this article help 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 👋

Tags

Published 15 Apr 2020