Какой инструмент использовать для объединения кода CSS и SCSS - PullRequest
Новая
       9

Какой инструмент использовать для объединения кода CSS и SCSS

0 голосов
/ 12 декабря 2018

Поскольку мой код труден для чтения, я хочу объединить некоторые длинные регулярные операторы CSS, такие как: 

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

с текущим документом scss.Итак, предположим, что у меня есть фрагмент CSS, который выглядит как предыдущий оператор, и у меня есть файл scss, содержащий это, например: 

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

     #column-3 {
       .header {

        }
      }
  }

Я хочу в результате 

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

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

Есть лиавтоматический способ сделать это без необходимости искать эквивалентный элемент в дереве SCSS и копировать вставить все свойства?

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

В этом случае у вас есть два файла:

OLD.scss 

div {
  width: 300px;
}

и

NEW.scss 

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

Сначала вы должны запустить sass NEW.scss COMBINED.css, он выдаст:

COMBINED.css 

div {
  width: 300px;
}

div {
  color: red;
}

Затем sass-convert COMBINED.css COMBINED.sass иВы получите:

COMBINED.sass 

div {
  width: 300px;
  color: red;
}
0 голосов
/ 13 декабря 2018

Вам на самом деле не нужно, потому что он будет скомпилирован автоматически.Но я понимаю, что может быть трудно прочитать код в этом очень длинном формате.Я проверил этот инструмент и его основные функции.Надеюсь, это поможет вам.

https://www.css2scss.com/

...