Basics of cmd commands and how to install sass

  •  
  •  
  •  
  •  
  •  

Most of the people asked how to install sass and Ruby, it is very easy and simple in nature if you have patient to learn and spend just a few hours.

Sass is used to code HTML designs more systematically. It is used to create clean codes at minimum times. It’s compressed file features will make your CSS files lighter. It very much convenient for coders to handle bunch of large codes within very short time. Therefore every coders should use this features as it will save time, keep the design clean, light and save lots of time.

To use sass you have to know the basic operations of cmd. As cmd command prompt is used to run sass.

Firstly, to run cmd inside a folder: open that folder where cmd prompt you want to run by Ctrl+Shift and press right click of your mouse like the below screenshot.

In my case, I have created a folder named sass responsive and kept all essential files there to design an html template and I would like to run cmd prompt on that folder.

cmd commands

Secondly, to change directory or folder use cd (means change directory command) through cmd commands prompt. see image below:

cmd command to change

Thirdly, to create a directory or folder use md (means make directory)

make directory

Fourthly, to remove a directory or folder use rd (means remove directory)

remove directory

Fifthly, to check which files are existing inside a folder use dir (to show all files inside directory)

sass installation process

Step one: To install SASS, you have to install Ruby (sass runs under rubby). To install your have to go to the download link you need to click here.  Here in download page you will see the page like the below screenshot. Please note that you will discover a download link is bold among all other links. It says this one will be best suited with your pc’s configurations. So click on that link and download and install just by pressing next next and so on.

ruby

Step two: It will take few minutes to install and be patient and wait until finishing of the installation process. Now its time to check either it is installed successfully or not. To check Ruby installation go to cmd and write  ruby -v and press enter. If its show version of rubby than it is confirmed that your installation was successful.
how to install sass

Step 3: Now you need to install sass under this ruby.To do this go to cmd commands prompt and write gem install sass  and press Enter. Now sass will have installed. To check sass is installed perfectly just go to cmd commands prompt and write sass -v and press Enter. It will show you the sass version.

Step 4: create a scss file  and provide a name (in my case here I created main.scss file and run the cmd commands prompt under going to scss folder. On the cmd write sass main.scss:../css/style.css and press Enter. After using this codes style.css file will automatically generated.
scss file creation

sass watching: Now style.css file is ready. We will not code inside the style.css file. What we will do is that from now on wards we will code inside main.scss file and via sass codes will be copied to style.css file. So that we don’t need to touch style.css file. To do this functionalities, what we need to keep the sass watching mode via cmd commands prompt. To watch and copy codes to style.css file we have to open cmd prompt and write sass –watch main.scss:../css/style.css and press Enter. After doing this watch mode will be opened and keep this cmd prompt as watching mode when you coding inside the scss file. otherwise what you code inside the main.scss file will not be generated to style.css file.

sass watching

code reflection:If you look into the bellow image, you will notice that if  you start the watch option of sass via cmd commands prompt, anything your change or update in the main.scss file, it is automatically generating to the style.css file.

sass code reflection

Note: when coding to css file don’t forget to turn the sass watch mode on. Otherwise your css file will not be updated or reflected. After truing it on, minimize this window so that it will not bother you. When you are done with your coding, turn this sass watch mode off by writing Ctrl+c  and press Enter


  •  
  •  
  •  
  •  
  •  

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *