Web Design: How to Convert CSS to Sass & SCSS

CSS is a really simple and straightforward language, but when it is getting too long – let’s say for a thousand of lines, it turns into a maintenance ‘nightmare’. Everything will be too complicated to maintain, and we will get lost with which style rules to keep up with or overwrite. For that reason, a CSS Pre-processor is created to make writing CSS programmable and more maintainable.

One that is popular among developers and designers is Sass, which we have covered previously in posts like:

• Getting Started With Sass: Installation And The Basics
• Syntactically Awesome Stylesheets: Using Compass In Sass
• CSS Preprocessors Compared: Sass Vs. LESS

If you have just made the swap from CSS to Sass, you might be thinking to convert your old CSS into Sass or SCSS. Well, if that is the case, you can use a third-party tool called css2sass.

Using CSS2SASS

This tool is simple and intuitive – I might not even have to tell you how to use it but, for demonstration purpose, we will run a few tests with the tool. First, given the following CSS codes:

 header .nav { margin-top: 100px; } header .nav li { margin-left: 10px; } header .nav li a { height: 30px; line-height: 10px; } 

We would like to convert it into Sass syntax, which is turned into:

 header .nav margin-top: 100px li margin-left: 10px a height: 30px line-height: 10px 

The style rules are now nested under preceding selectors using indentation to distinct the cascading level. If we convert it into SCSS syntax the cascade will be differentiated with curly brackets, just like in CSS.

The Same Style Rules

Let’s give it another try. This time, we have the following two selectors with the exact same style rules, and we will covert it into Sass syntax.

 .footer { color: #b3b3b3; background-color: #fafafa; } .copy { color: #b3b3b3; background-color: #fafafa; } 

The generated output is quite clever, this tool concatenate the selectors in a single line, and separate them using a comma, as follows.

 .footer, .copy color: #b3b3b3 background-color: #fafafa 

Although, this is not what I’ve actually expected. It would be better if the output was in Selector Inheritance, probably to be something like in the code below.

 .inherit1 color: #b3b3b3 background-color: #fafafa .footer @extend .inherit1 .copy @extend .inherit1 

Pseudo-class and Selector Combination

Lastly, we would like to try converting some style rules with :hover pseudo-class and the selector combination, as shown below.

 .button:hover { color: #ffffff; background-color: #bf813d; } .button.active { background-color: #986731; } 

The output is as expected. This tool nests the pseudo-class and the selector combination with & sign, like so.

 .button &:hover color: #ffffff background-color: #bf813d &.active background-color: #986731 

Room for Improvement

This tool has some limitations in recognizing our CSS cascading structure to convert them appropriately into Sass or SCSS syntax. But, there is certainly room for improvement.

I am not quite sure whether it is possible to integrate Compass to this conversion tool. It would be just great, if we were able to convert the following CSS3 @font-face rule:

 @font-face { font-family: "DroidSansRegular"; src: url("fonts/DroidSans-webfont.eot"); src: url("fonts/DroidSans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/DroidSans-webfont.woff") format("woff"), url("fonts/DroidSans-webfont.ttf") format("truetype"), url("fonts/DroidSans-webfont.svg#DroidSansRegular") format("svg"); font-weight: normal; font-style: normal; } 

…into Compass @font-face mixin, as follows

 @include font-face("DroidSansRegular", font-files("DroidSansRegular-webfont.ttf", "DroidSansRegular-webfont.otf", "DroidSansRegular-webfont.woff"), "DroidSansRegular-webfont.eot", normal); 

But, in general this tool is one of a many good places for those who are just getting started with Sass. Convert your old CSS and you will see how it is constructed in Sass or SCSS syntax.

The post Web Design: How to Convert CSS to Sass & SCSS appeared first on Hongkiat.