ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Learn how Ruby and Sass makes CSS fun again.

Updated on October 26, 2016

This week I started to use sass (http://sass-lang.com/tutorial.html). This has helped me a lot to manage my CSS files and also compress all CSS files on the fly. As I use windows, I had to do extra work to start using sass, command line git etc.

First thing was to install ruby from http://rubyinstaller.org/ (I am using version Ruby 1.9.3-p194).

Also, I wanted to use my windows command line same as that in Linux, so I installed Cygwin from http://www.cygwin.com/install.html and followed all the instructions mentioned on the page.

I also downloaded RubyGems from url https://rubygems.org/pages/download#formats. Once I extracted that zip file, I cd into the directory where there was a file named 'setup.rb' using windows command prompt.

Command to run:

Setup Ruby on windows

ruby setup.rb

With RubyGems installed, I wanted to install Capistrano too:

Install capistrano and railsless-deploy

Capistrano - "gem install capistrano"

Rails-less Deployment - "gem install railsless-deploy"

I installed git for windows from here: http://code.google.com/p/msysgit/downloads/list

Then added executable paths of ruby, capistrano, git to windows system variables:

Control Panel > System > Advanced System Settings > Environment Variables...

In the User Variables, if you do not already have a PATH variable, create a new one.

Fill in the following details accordingly:

Variable name: PATH
Variable value: C:\Program Files\Git\cmd; etc...

Make sure you have the semi-colon at the end.

Thanks to Eira Tse (ash) for preparing above doc and helping me to install on my machine.

At this point, I had ruby and gem commands properly working. Next thing I had to install was SASS.

Install sass on windows

gem install sass

After SASS was successfully installed, I was ready to test it. So, out of all css files I had, I selected one css (custom.css) which was biggest in size and coverted it to sass using online tool I found through google and saved converted css file as custom.scss on the same directory (can be on separate directory and which is recommended).

Then I changed directory to css folder:

cd C:/_projects/new-baby/master/skin/frontend/baby/default/css/


And, I ran below command to convert sass back into css:

Sass compile scss to css

sass --watch custom.scss:custom.css

And, the result was much cleaner and organised css.

Then, next day I found that it can also compress output css by adding --style compressed

So, I started using that functionality too:

Sass compile and compress css

sass --watch custom.scss:custom.css --style compressed

As I had started to love sass I wanted to convert other css to sass as well but I had forgotten the online converter url, so started to google again. Then I found that sass can convert css to sass and is much better than that online tool. so

So, I converted another css file 'menu.css' to 'menu.scss' from command line:

Sass Convert Css to Scss

sass-convert menu.css menu.scss

Now, I have more than one sass file and I didn't want to open separate command line windows to watch those sass files. After checking sass docs, I found that I can watch directory instead of file and it can convert sass to css respectively. wow cool!!!

cd C:/_projects/new-baby/master/skin/frontend/baby/default/

Sass compile multiple scss files

sass --watch css:css --style compressed

And, it started to watch all sass files and convert them to css respectively as soon as i make any changes on any scss file.

I am still learning sass but at this point this is how my custom.scss looks:

Sample scss file

/*color declarations*/
$white: #FFFFFF;
$pink: #EE364F;
$light_black: #231f20;
$grey_text: #404d4f;
$grey_background: #f4f4f4;
$grey_border: #DCDDDE;
$grey_dark: #666666;

/*font weight declarations*/
$hairlineFont:100;
$extraLightFont:200;
$lightFont:300;
$regularFont:400;
$mediumFont:500;
$semiBoldFont:600;
$boldFont:700;
$blackFont:900;

/*font size declarations*/
$font9: 0.750em;
$font10: 0.833em;
$font11: 0.917em;
$font12: 1em;
$font13: 1.083em;
$font14: 1.167em;
$font15: 1.250em;
$font16: 1.333em;
$font17: 1.417em;
$font18: 1.500em;
$font19: 1.583em;
$font20: 1.667em;
$font21: 1.750em;
$font22: 1.833em;
$font23: 1.917em;
$font24: 2.000em;

body, ul, ol, dl, h1, h2, h3, h4, h5, h6, td, th, caption, pre, p, blockquote, input, textarea {
	color: $grey_dark;
	font-weight: $regularFont;	
	line-height: 1.545;
}

h1, h2, h3, h4, h5, h6 {
	color: $grey_dark;
	margin: 0 0 11px 0;
	font-weight: $regularFont;
	line-height: 1;
}

h1 {
	font-size: $font20;
	font-weight: $semiBoldFont;
}

button{
	&.button{
		background: $pink;
		border: 0 none;
		color: $white;
		font-size: $font14;
		font-weight: $semiBoldFont;
		text-transform: uppercase;
		span{
			display: block;
			line-height: 18px;
			padding: 0;
		}
	}
}

... and so on.

If you need to include empty Classes and Ids on the converted css from scss. You can add comment block as below, so, the declaration of class is not taken as empty and it will be preserved in css when scss is compiled.

Empty css class

.empty {
  /*I'm still empty*/
}

Comments

    0 of 8192 characters used
    Post Comment

    • smga22 profile image

      smga22 5 years ago from Dhaka, Bangladesh

      Lots of good information in this article. Voted uP!