Which tool use to merge CSS and SCSS code

Question

Since my code is difficult to read I want to merge some long regular css statements like this:

.aui #content .columns-1-2-equal .row-fluid #column-3 header {
 prop1 ...prop2 prop3
}

with a current scss document. So assuming i have a piece of CSS which looks like the previous statement and I have a scss file containing this for example:

.aui #content {
  prop4
  .columns-1-2-equal {
    prop5
    .row-fluid {

     #column-3 {
       .header {

        }
      }
  }

I want as a result

.aui #content {
  prop4
  .columns-1-2-equal {
    prop5
    .row-fluid {

     #column-3 {
       .header {
            // MERGED CODE
            prop1 ...prop2 prop3
        }
      }
  }

Is there an automatic way to do it without having to search for the equivalent element in the SCSS tree and copy paste all the properties?

Why would you want to do this? Any changes you make in your SCSS file would be automatically mapped and updated in your generated CSS file. — Peter, Dec 12 '18 at 18:31
Because my code is difficult to read. I want to merge regular css with current scss. — Claudio Ferraro, Dec 12 '18 at 18:43
Possible duplicate of [Import regular CSS file in SCSS file?](https://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file) — Peter, Dec 12 '18 at 19:31
I don't need to import css. I need to merge existing pure CSS in a SCSS. So 2 pieces of code should become 1 with the brackets and the correct syntax. — Claudio Ferraro, Dec 12 '18 at 22:22

score 0 · Answer 1 · answered Dec 12 '18 at 21:07

0

You don't really have to because it will be compiled automatically. But, I get that it can be difficult to read the code in this very long format. I tested this tool and its basic function. Hope this helps for you.

https://www.css2scss.com/

answered Dec 12 '18 at 21:07

brooksrelyt

3,925
5
31
54

It even added color variables which I thought was pretty neat. – brooksrelyt Dec 12 '18 at 21:08
Edited my question – Claudio Ferraro Dec 12 '18 at 22:28

score 0 · Accepted Answer · answered Dec 12 '18 at 22:37

0

In this case you have two files:

OLD.scss

div {
  width: 300px;
}

and

NEW.scss

@import "OLD.scss";
div {
  color: red;
}

First you should run sass NEW.scss COMBINED.css it will output:

COMBINED.css

div {
  width: 300px;
}

div {
  color: red;
}

Then sass-convert COMBINED.css COMBINED.sass and you will get:

COMBINED.sass

div {
  width: 300px;
  color: red;
}

answered Dec 12 '18 at 22:37

brooksrelyt

3,925
5
31
54

Were you able to implement this? – brooksrelyt Dec 13 '18 at 15:06

Which tool use to merge CSS and SCSS code

2 Answers2