Starting with Saas in VSCode

Hello, all lovely people here!🤩

While working on my recent project I thought to use Sass to skill up. The best part of using Sass is it's made my CSS writing much easier than ever 🙂. In this article, I am going to share a few insights that how one can easily start with SCSS/Saas.

CSS got superpower with Saas

What is Saas?

Saas(Syntactically Awesome Style Sheet) is a CSS preprocessor, it helps us to write robust, maintainable CSS. Saas does not run in the browser, it Extends CSS during development.

Saas Environmental setup in vscode

It's absolutely easy to start with Saas in vscode and we are getting most of the things handy. One vscode plugin is playing all the game. Below mentioned steps:

1. Plugin Setup

we need to install the live Saas compiler plugin in vscode to compile .scss file.

Once the plugin is installed it will show watch Saas icon at the bottom in vscode. Need to click on watch Saas to start compiler.

We need to click on the watch Saas icon after creating .scss file so that Saas compiler will automatically create .css file and compiled css code will be written into .css file. Let's see how it will happen.👇

2. File Structure

It's always good to create a separate folder to store all .css files and .scss files. Create the .scss file inside the folder and then click on watch Saas then Saas compiler will compile .sass file and it will automatically create .css file.

We Don't create .css files manually, let Saas compiler do it.

We have to link only .css file in index.html, not .scss file. Setup is ready, Let's get started to write Saas code. 👇

3. Writing Saas

Saas is giving the flexibility to write CSS code. It becomes easy to write and easy to maintain. Let's see each of the Saas writing sections below:

1.Variables

Unlike CSS here also we can create variables to use later.

//creating vaiable
$brand-red:  #FE4066;

//Using variable below
div
{
  color:$brand-red; 
}

We can write all variables in one separate file and the file name would be _var.scss(file name must start with underscore to avoid compilation). We need to import that file into main .scss file with other imports like fonts.

@import 'var';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

2. Mixin

Some of the common properties which are repeated, added into mixin variables. Mixin example as below:

//creating mixin
@mixin commonCode
{
margin:0;
letter-spacing: 1.3rem;
font-size: 4rem;
}

//using mixin
div
{
@include commonCode;
}

Unlike variables we can write all mixin in separate file and import that into main .scss file. Mixin file name would be _mixin.scss(file name must start with underscore to avoid compilation). Import as below:

@import 'mixin';

Now, by this time the overall file structure would looks as below:

3.Nesting

Nesting is one of the powerful feature of Saas which allow us to write code inside the blocks and so on.

<!--HTML code as below  -->
<div>
<h1>This is Title</h1>
</div>

//Saas code as below
body{
margin: 0;
    div{
      color: #fff;
          h1{
          font-size: 1.2rem;
          }
     }
}

4. Media Queries

mixin provides so much power to write media queries in easiest way. Create the media query variable in mixin and use it in main .scss file.

//create variable
$desktop:1446px;

//create mixin
@mixin desktopMedia{
  @media (min-width:#{$desktop})
  {
    @content;
  }
}

//use media query
//device width<1446px then font size 1.4rem and device width>1446px then font size 1.8rem
h1{
  font-size: 1.4rem;
  @include desktopMedia{
    font-size: 1.8rem;
  }
}

That's all for this article I hope you found the article useful. I tried my best to put all the valuable content here so that anyone can start with Saas. Thanks for reading. As you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback! 🙂

I would love to connect with you at Twitter .