[Sass] Installing and Using Sass on Windows for Beginners



Hello all,

If you are a Beginner in Sass then this tutorial is for you.

 And do share it if you found it useful at the end. This blog follows Simple steps to create an application which uses sass.

Installing Sass on Windows

First we need to install Ruby using the Link. Look for the (x64) version.

What is Ruby?

Ruby is the technology Sass is built on. So you need to install ruby first so Sass can run on top of it. 

Important note:  While installing Ruby make sure that you have 'Add ruby executable in your path' option checked.

Steps To Use Sass

Now lets start with the Sass part in the most easiest way because many other tutorials complicate things too much.

Follow the steps below:

1. Create a demo folder in any of your drive.

2. Inside that folder create two sub folders /css and /scss.

3. Now create a .scss file in you /scss folder and name it demo-style.scss. Yes, this is your Sass file. But its empty now.

4. Now open this /demo folder in you command line. 

Tip: Easiest way to go to /demo folder inside command line is to drag and drop the folder inside command line after you change your directory to the specific drive in which you have saved your demo folder.

5. Here comes the cool part. 
    
    Now we need to let Sass watch our .scss files and make it compile to .css.
 
    So in cmd write this command:

                            Sass --watch sass:css

    --watch command:  It is not a command. It is a flag. The watch flag tells Sass to pay attention to the /css and /scss folders. So that any change in .scss files can be detected and converted into css automatically which you can use in your websites.
6. Edit the .scss file and watch Sass compile it to .css file.

    I. Open your folder in any text editor.
    II. Open demo-styles.scss file and add some css in it.
    III. Save the file and verify in your command line that the compiling to .css was successful. 
    IV. Now open your demo-styles.css inside your /css folder.
    

Final Words

 Yeah, we are finally done in setting up and using Sass in your local machine.

  If you need any other simplified post on Basics of Sass, drop me a message, I'd be glad to help.

  Thank For Reading!!!

  Also if you find it useful than do Recommend it below.



Location: India

Comments

Post a Comment

Popular posts from this blog

Google maps places autocomplete using Angular 2

Image
Hello all, Entering location manually could be the most annoying part any user can experience while using your application. Maps Places autocomplete feature could be added to any particular application written in any specific language. Here we will do it using angular 2. Angular or Angular 2/4  the latest buzz in the Javascript world is considered the best amongst many Javascript frameworks. Before we proceed we need an angular project which we will create using angular cli. Angular CLI You all can refer to this  Angular CLI . npm install  @angular/cli -g ng new my-app cd my-app ng serve note: MAC users should use npm install with administrative permissions (use sudo before command). Now we need a package for using google maps components to achieve what we started on. Angular Google Maps(AGM) Angular Google Maps(AGM) contains serveral components to use google maps and its several components into your applications. We use it by installing packages to our angular proj
Read more

Range Slider Uisng Javascript and CSS for changing the selected part Color

Image
Hello all, You all would have seen many blogs and videos creating range slider using JQuery. But most of us encountered this situation in production code to create it using Plain JavaScript only. So here is the solution guys. In this tutorial we will go on to create a input range slider using plain JavaScript. Which can thus be added to any framework of JavaScript. Also in this tutorial we will do the CSS part of it also to make the selected part different in color then the background one. Stay calm we will do it. Objective : To create a range slider which have its selected part highlighted with different color. Lets get started. Understanding Input type="range" Input type="range" is represented using a slider rather than a textbox as in number type. Note : If your browser doesn't support the type range then it will fall back and show normal text input. Create a folder and add your index.html , style.css and script.js files. Now in your inde
Read more