Ever wanted to make your own CSS2Sass convertor ? When working on projects, a tool that can quickly convert our CSS code to Sass can be ridiculously useful. Let’s see how to do it.

Using sass-convert

The Sass Ruby Gem ships with a sass-convert executable. Its quite funny that many people still do not know about it or get confused thinking that its for SCSS -> Sass and Sass -> SCSS conversion. Well, after all SCSS is CSS, right ?

This command will help you convert your CSS code to Sass or SCSS:

Shell
sass-convert style.css style.sass

sass-convert style.css style.scss

style.css should be an existing CSS file, while style.sass and style.scss files will be generated if they don’t exist.

In Ruby Code

I quickly dig into the sass gem and tried to figure out what sass-convert basically does, so that one could also implement the exact same functionality in plain Ruby Code (it can be really useful sometimes). Here’s what I came up with:

Ruby
require 'sass/css'

# CSS Code

css = %Q{

body {

  color: red;

}

}

# SASS

puts ::Sass::CSS.new(css).render(:sass)

# SCSS

puts ::Sass::CSS.new(css).render(:scss)

Downsides

If I am not wrong, I don’t think the conversion preserves any variables, mixins, inheritance, etc. Although nesting is added appropriately. So, the result might not be spot on always, but can still be a time saver sometimes.