In this blog I am going to explain how to compile a sass (.scss) file to our most familiar css (.css) file.<\/p>\n
There are many ways to install sass but I am going to install it in a very simple way.<\/p>\n
<\/p>\n
For Linux users<\/strong><\/p>\n If you’re using a distribution of Linux, you’ll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.<\/p>\n sudo gem install sass –no-user-install<\/em><\/p>\n <\/p><\/blockquote>\n For Windows users<\/strong><\/p>\n Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use\u00a0Ruby Installer<\/a>. It’s a single-click installer that will get everything set up for you super fast.<\/p>\n The installer will also install a Ruby command line powershell application that will let you use the Ruby libraries.<\/p>\n <\/p>\n For Mac users<\/strong><\/p>\n If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you’re using a Mac, congratulations, Ruby comes pre-installed.<\/p>\n As I am a windows OS user, going to use windows process.<\/p>\n <\/p>\n <\/p>\n Go to Ruby Installer @ https:\/\/rubyinstaller.org\/<\/a><\/em> and download the software as per your machine configuration. Mine is windows 32 bit, so I will download and install Ruby 2.4.2-2 (x86)<\/a><\/em><\/p>\n (You can think that what is Ruby Installer, well you will find everything at the above mentioned website link)<\/p>\n <\/p>\n <\/p>\n Open your Terminal or Command Prompt.<\/strong><\/p>\n On the Mac the Terminal.app comes installed by default. It’s located in your “Utilities” folder.<\/p>\n On Windows, run `cmd`.<\/p>\n Install Sass.<\/strong><\/p>\n Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type<\/p>\n gem install sass<\/em><\/p>\n If you get an error message then it’s likely you will need to use the\u00a0sudo<\/em>\u00a0command to install the Sass gem. It would look like:<\/p>\n sudo gem install sass<\/em><\/p>\n You will get very few lines of installed message in cmd like<\/p>\n You should now have Sass installed, but it never hurts to double-check. In your terminal \/ cmd application you can type:<\/p>\n sass -v<\/em><\/p>\n It will return\u00a0Sass 3.5.3.(Bleeding Edge)<\/p>\n Congratulations! You’ve successfully installed Sass on your computer<\/p>\n <\/p>\n <\/p>\n Go to the project folder where you want to run the sass via cmd or terminal.<\/p>\n In my case I have a main folder \u201csass\u201d and within this folder a separate folder called \u201ccss\u201d where I want to store all the style sheets. So I will go to css folder using command prompt.<\/p>\n <\/p>\n <\/p>\n Now create a index.html file within main folder and create a sass file with .scss extension within css folder manually.<\/p>\n <\/p>\n <\/p>\n Go to command prompt and as Sass is installed, you can run<\/p>\n sass\u00a0<\/em>input.scss output.css<\/em>\u00a0<\/span><\/p>\n from your cmd or terminal. This means output.css file will be created and the sass file input.scss will compiled to output.css, what ever you will write in sass it will output its results in output.css<\/p>\n You can also tell Sass to watch the file and update the CSS every time automaticallly the Sass file changes by watch command<\/p>\n sass –watch input.scss:output.css<\/em><\/p>\n <\/p>\n <\/p>\n Go to input.scss<\/strong> file and try to write sass like<\/p>\n Now if you open the newly created output.css file you can see this sass have compiled to css successfully.<\/p>\n Along with that you can always see the command prompt have updated automatically and whenever you write sass in sass file and then if you save the file this command prompt text will update.<\/p>\n <\/p>\n <\/p>\n Open index.html<\/strong> and link the output.css with the page<\/p>\n Now if we run the index.html in a browser we can see the effects of our style sheet.<\/p>\n Along with that if we debug \/ inspect the element we can see all the styles are coming from input.scss file<\/p>\n That\u2019s it.<\/p>\n This is the way you can create your own styles using sass and run them in all browsers.<\/p>\n Source courtesy<\/strong>: http:\/\/sass-lang.com\/<\/a><\/em><\/p>\n Please share if you like it!<\/p>\nStep 1<\/strong><\/h4>\n
![\"Ruby](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img1.png\")
<\/p>\nStep 2<\/strong><\/h4>\n
![\"Install](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img2.png\")
<\/p>\n![\"Sass](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img3.png\")
<\/p>\n![\"Sass](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img4.png\")
<\/p>\nStep 3<\/strong><\/h4>\n
![\"Goto](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img5.png\")
<\/p>\nStep 4<\/strong><\/h4>\n
![\"Create](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img6.png\")
<\/p>\nStep 5<\/strong><\/h4>\n
![\"create](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img7.png\")
<\/p>\n![\"Watch](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img8.png\")
<\/p>\nStep 6<\/strong><\/h4>\n
![\"Sass](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img9.png\")
<\/p>\n![\"css](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img10.png\")
<\/p>\n![\"cmd](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img11.png\")
<\/p>\nStep 7<\/strong><\/h4>\n
![\"link](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img12.png\")
<\/p>\n![\"sass](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img13.png\")
<\/p>\n![\"Debug\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/11\/img14.png\")
<\/p>\n