CSS2SCSS.COM

CSS2SCSS Making your CSS files more loveable.

Paste your CSS below and get a SCSS file in no time

We just want to help you get a good start with SCSS.

Once you've worked with SCSS, you don't want to go back to CSS.

Maybe css2scss.com helps you to get there too!

}

FAQ

Why?

If you ever worked with something like SCSS, LESS or any other CSS preprocessor, you don't want to go back to plain old CSS. Working with SCSS is just a joy, especially when you start realizing that copying styled elements is much easier, that variables are making your life much more fun when the customer wants to change the colours once again and much more.

That's why we don't want to go back to CSS too, but like lots of people, we have to work with old code from the days before CSS preprocessors and they just aren't as much fun, especially if you know how good things can be. This is where CSS2SCSS.COM jumps in. It won't create perfect SCSS code, but it gives you a good start by created a properly nested SCSS file based on your existing CSS file!

Want to help? The library powering this site is open-source, checkout its github site if you want to contribute: https://github.com/ortic/css2scss

SCSS or SASS?

There's quite some confusion about SASS and SCSS. What's the difference? SCSS is just a new syntax of SASS introduced with version 3 of SASS. The structure is the same, but SCSS is a superset of CSS3 which means that every CSS you already wrote is a valid SCSS file. That makes it easier to switch to SCSS from CSS than to SASS. At the moment we only support SCSS.

Is this the only kind?

No, it isn't, but so far, we haven't found any good converters out there. Some don't support pseudo classes and others are simply not supported anymore. While we can't promise to support this project forever, we intend to make it the best css to scss converter there is.

Is it flawless?

We're using a bunch of unit-tests to keep things smooth, but we're still in an early phase. This mean that you'll probably find some issues and lots of ideas to be added.

We're happy to hear them, just let us know and we'll prioritize them and hopefully add them in the near future!

But please, keep in mind that this is a machine conversion. It can't read your mind and sometimes if you have an ugly CSS with a bunch of random selectors, the SCSS file won't look a whole lot better. We also can't do much about the order of certain rules. If you specify competing CSS properties, the SCSS file might break things because we have to re-group most of your CSS file.