How To Convert CSS To Sass & SCSS | Web Designer

Tutorials & Methods
, , ,
1

image

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.

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. (Source: hongkiat)

Happy learning!

5 Likes