SASS, как импортировать указанные классы из файла CSS, а не весь

Question

Я пытаюсь импортировать некоторые классы из файла CSS, такого как bootstrap.css, в мой файл SASS site.scss, но не все из них. Проблема со следующим кодом состоит в том, что я получаю все классы начальной загрузки в моем скомпилированном файле site.css:

site.scss

@import "bootstrap";

.my-div-md-6
{
    /*some other styles*/
    @extend .col-md-6;
}

С другой стороны, это можно сделать с помощью LESS, импортировав bootstrap.css в качестве ссылки, используя этот код:

site.less

@import (less, reference) "bootstrap.css";

.my-div-md-6{
     /*some other styles*/
    &:extend(.col-md-6);
}

Скомпилированный вывод LESS очень легкий, как показано ниже:

site.css

.my-div-md-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 992px) {
  .my-div-md-6 {
    float: left;
  }
  .my-div-md-6 {
    width: 50%;
  }
}
.my-div-md-6 {
  /*some other styles*/
}

Можно ли добиться этого с помощью SASS? Если да, то быстрый пример поможет.

Благодарю.

Answer 1

К сожалению, нет простого ответа, и на момент написания этого, Ruby Sass изначально не поддерживает МЕНЬШЕ import (reference) особенность.

---

TLDR; Предложения:

• используйте uncss или postcss для удаления скомпилированного css из файла перед финализацией таблицы стилей.
• если вы можете, используйте mixins и классы-заполнители для перезаписи файла scss, но это НАИБОЛЕЕ много времени.
• import "file" как частичный такой, что file="_file.scss" а также @extend .class если вам абсолютно необходимо, (ручной метод, но предположим, что он будет работать)

---

UNCSS

Вы можете использовать uncss как пакет из npm удалить скомпилированный CSS (я знаю, что это неэффективно, но если вам пришлось использовать SASS), тогда вы удалите зерно, сгенерированное из примера импорта начальной загрузки.

КАК?
Цитата: SO-Answer-Joesph

Как? Процесс, с помощью которого UnCSS удаляет неиспользуемые правила, выглядит следующим образом:

• HTML-файлы загружаются PhantomJS и выполняется JavaScript.
• Используемые таблицы стилей извлекаются из полученного HTML.
• Таблицы стилей объединяются, а правила анализируются с помощью css-parse.
• document.querySelector отфильтровывает селекторы, которые не найдены в файлах HTML.
• Остальные правила конвертируются обратно в CSS.

Так что да, он удаляет селекторы, отсутствующие в DOM во время выполнения. Если у вас есть динамически добавленные селекторы, вы можете заставить uncss игнорировать их, комментируя: /* uncss:ignore */ перед ними, например..

УБЕДИТЕСЬ, ЧТО ВЫ ДОБАВЛЯЕТЕ ВАРИАНТ МЕДИА В UNCSS
REF: SO-Answer-Дексден

---

SASS Фоновое исследование:
Подводя итог выше:

nex3: один из основных ведет для sass, был в google и работает над dart, Они выпустили dart-sass (нестабильный выпуск) как переписывание в пользу замены и улучшения ruby sass, Это интересно, так как это переписывание также объясняет отсутствие разработки функций в Ruby Sass а также необходимость переписать. Поскольку основной участник ruby ​​sass-порта: т.е. libsass (реализация ruby- sass на C++) покинул команду libsass, это дает дополнительный импульс для улучшения производительности sass.

Кредит:

• Joesph
• Deksden