Slbox
Slbox

Reputation: 13108

Automatically generate nested SCSS from regular CSS?

I'd like to take some legacy CSS files and convert them to SCSS with nested styles. For example:

Input

#SomeElement .button { /*Some styles*/ }

#SomeElement .link { /*Some styles*/ }

Output

#SomeElement {
    .button { /*Some styles*/ }
    .link { /*Some styles*/ }
}

Is there any tool to make this project manageable with thousands of lines of CSS to convert? I understand there may be some edge cases that need manual fixing, but it would be great to be able to jump start the process with some sort of automatic conversion.

Would PostCSS or Gulp have any tools I could leverage?

Thanks for reading.

Upvotes: 2

Views: 2228

Answers (1)

Rakesh Shrivas
Rakesh Shrivas

Reputation: 671

  1. By using this you can change your css to scss http://css2sass.herokuapp.com/

  2. Using Gulp https://www.npmjs.com/package/gulp-css-scss

Upvotes: 4

Related Questions