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.
Secondly, to change directory or folder use cd (means change directory command) through cmd commands prompt. see image below:
Thirdly, to create a directory or folder use md (means make directory)
Fourthly, to remove a directory or folder use rd (means 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.
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.
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.
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.
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.
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
