CSS

Install Sass on Windows

by Mike Ditka

Hi developers, this time we will try to install Ruby on windows and try using Sass.

If you are someone who always deals with CSS, we recommend you to try Sass, because with Sass writing CSS code becomes more interesting and fun. As it is written on the official website of Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

The main thing to do to get started using SASS is to install Ruby, because SASS runs on top of Ruby.

For use on windows we can use the Ruby Installer for windows.

  1. Download Ruby Installer (latest version 1.9.3-p327)
  2. Install the downloaded Ruby

Install Ruby Until it’s finished
Install Ruby Until it’s finished

  1. After Ruby is installed, go to Command Prompt Ruby ( Start -> All Programs -> Ruby 1.9.3-p327 -> Start Command Prompt With Ruby )

Open Command Prompt Ruby
Open Command Prompt Ruby

  1. Install Sass with the command

gem install sass

Install SASS
Install SASS

  1. Installation process is complete

Start Working With Sass
After the installation process is complete, it means that now we can start making css using Sass.

  1. Create a folder in htdocs (example: mysass)
  2. Create an HTML File (index.html) with the following structure in body and /body

Sass

Have fun playing with ruby

while the head and /head sections don’t forget to include the css file compiled from sass

[html] [/html]

  1. Create a sass file with the name style.scss the contents are as follows
  • Remember the extension is .SCSS

$back-color: #333;
$text-color: #f8f8f8;
$box-margin: 30px;
$box-width: 500px;

.test{
background: $back-color;
color: $text-color;
margin: $box-margin auto;
padding: $box-margin / 2;
width: $box-width;
}
There we can see, CSS can now use variables, division and subtraction.

Interesting right?

For further use of .SCSS or .SASS syntax, please read the sass website.

  1. Reopen Command Prompt, go to mysass folder

Here my mysass folder is in E:XAMPPhtdocsmysass

  1. Compile the .SCSS file to become a .CSS file with the following command

sass –watch style.scss:style.css

A CSS file will be created with the name style.css, please run http://localhost/mysass to see the results.