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.
Recommended Reading: How to Convert CSS to LESS
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.
Recommended Reading: Sass vs. SCSS: Which Syntax is Better?
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.
via hongkiat.com http://rss.feedsportal.com/c/35261/f/656072/s/2cc3d1a2/l/0L0Shongkiat0N0Cblog0Cconvert0Ecss0Eto0Esass0C/story01.htm