Home / CSS3 / Convert CSS to SCSS & Sass Easily
4 minutes read
152 Views
css to sass

In the long run, CSS is a really basic and straightforward language.

After a few hundred lines, it becomes a “maintenance nightmare,” and so on. Everything will become unmanageable, and we’ll be baffled as to which style guidelines we should adhere to and which ones we should ignore. Thus, a CSS Pre-processor was developed to make CSS authoring more programmable and easier to maintain. Let us take a look at how to Convert CSS to SCSS & Sass Easily.

When using a CSS preprocessor, you may create CSS using the preprocessor’s own custom syntax. There are many CSS Pre-Processors to choose from, but most of them offer capabilities not found in pure CSS, such as mixins, nested selectors, inheritance selectors, and so on. These improvements improve the readability and maintainability of the CSS structure.

As a new Sass user, you may be considering converting your existing CSS files to either Sass or SCSS. If that’s the case, a free program called css2sass may help.

Using CSS2SASS

Although I don’t think I’ll have to explain how to use it, I’ll run a few tests with it just to show you how easy it is to use. To begin, let’s say you have the CSS codes as follows:

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

We’d want to transform it into Sass syntax, which reads like this:

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

Indentation is now used to distinguish the cascade level between the style rules and the previous selectors. SCSS syntax will distinguish the cascade by using curly brackets, much like CSS.

The Same Style Rules

Let’s have another go at it now. This time, we’ll use Sass syntax to convert the following two selections, each with the exact identical set of style rules.

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

This tool concatenates the selections into a single line and uses a comma to divide them, as seen below.

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

This, on the other hand, is completely unexpected. Ideally, the result would be in Selector Inheritance, like the code below.

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

Pseudo-class and Selector Combination

Lastly, we’d want to see how well the :hover pseudo-class and selector combination work when converting style rules.

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

The outcome matches my expectations exactly. The & symbol is used to nest the pseudo-class and selector combination in this tool.

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

Room for Improvement

When converting our CSS cascading structure into Sass or SCSS syntax, this tool has certain limitations in recognizing it. However, there’s always an opportunity for growth.

I’m not sure whether Compass can be used with this conversion tool. It would be wonderful if the following CSS3 @font-face the rule could be converted:

@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: norma

…into Compass @font-face mixin, as below:

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

Conclusion

In general, this tool is an excellent starting point for people new to Sass. If you convert your old CSS to Sass or SCSS syntax, you’ll see how it’s put together.

Further Reading 📚

Check out the following to learn more:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *