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:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
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:
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.
Can you tell me how to convert SCSS to SASS ?
Same approach to convert SCSS code to Sass or Sass to SCSS:
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass