Могу ли я расширить внешнее правило s css, не включая его в вывод? - PullRequest
Новая
       45

Могу ли я расширить внешнее правило s css, не включая его в вывод?

2 голосов
/ 12 февраля 2020

УКАЗАН, что существует файл s css, в котором определены правила, такие как .btn {..} или .btn-primary ...

Я ХОЧУ объявить свои собственные правила, расширив существующие правила 

.my-button {
  @extend .btn
  @extend .btn-primary
}

без фактического включения классов .btn и .btn-primary в мой сгенерированный файл css?

Обычно мне нужно @import exiting.scss, но это включает в себя все правила из файл в моем css выводе.

Ответы [ 3 ]

3 голосов
/ 23 февраля 2020

Sass в настоящее время не поддерживает это по умолчанию, ни с помощью правила @import, ни @use.

Тем не менее, если вы (можете) использовать npm пакетов (npm) / пряжа ) в вашем проекте, тогда node-sass-magi c -importer может пригодиться для вас.

В вашем примере вы могли бы сделать следующее: 

@import '{ .btn, .btn-primary } from ~bootstrap';

.my-button {
  @extend .btn
  @extend .btn-primary
}

Обратите внимание, что приведенное выше не будет точно того, что вы хотите - оно все равно будет импортировать два других класса, хотя бы не всю таблицу стилей. Если вы все еще хотите сделать go еще один шаг, вы можете сделать: 

@import '{ .btn as .my-button } from /bootstrap/_buttons.scss';
@import '[variables] from /bootstrap/_variables.scss';
@import '[mixins] from /bootstrap/mixins/_buttons.scss';

.my-button {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
0 голосов
/ 27 февраля 2020

Я порекомендую вам использовать @ mixins и @ include для этого.

Хотя, поскольку, как вы сказали в своем вопросе, вы используете существующий файл (возможно, сторонний), который определяет эти правила. Может быть утомительно превращать классы из этого файла в миксины.

, поэтому, если вы собираетесь использовать только несколько классов из этого файла, я рекомендую вам сделать это.

Вы должны будете превратить: 

.btn{
/*
some cool styles
*/
}

в: 

@mixin{
/*
cooler styles
*/
}

, но все же миксины, как заявлено в документации Sass , делают именно то, что нужно Вы хотите.

исходный код S CSS: 

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

результат CSS: 

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}
0 голосов
/ 27 февраля 2020

, когда вы импортируете как @import в s css и когда вы производите производственную сборку, график зависимости веб-пакета будет включать его только один раз на верхнем уровне, поскольку он становится общим чанком, поскольку вы используете его в нескольких местах. Да, есть побочный эффект, который также включает в себя неиспользованный s css, так как не происходит много сотрясений дерева.

Следовательно, это не должно влиять на сборку.

...