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!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)