Как внедрить модуль интервалов OOCSS в SCSS?

У меня есть макет на основе SCSS, в котором я хочу использовать пространственный модуль из OOCSS.

Модуль OOCSS — это чистый CSS — ptl, например, означает padding-top: large, где large — это определенное значение (по умолчанию 20px).

Я хотел бы улучшить его с помощью SCSS. До сих пор я мог заменить фиксированные значения переменными SCSS, поэтому я могу изменить значения в одном месте, если захочу (я не хочу):

$spacing-small: 5px;
$spacing-medium: 10px;
$spacing-large: 20px;
...
.pts,.pvs,.pas{padding-top:$spacing-small !important}

Теперь я хотел бы иметь возможность использовать ptn, pvs и т. д. в качестве примесей, поэтому я могу сделать это:

.client-name {
  @include spacing-pvs; // this has the same padding properties as pvs
}

Я гибкий в синтаксисе, но это та функциональность, которая мне была бы интересна.

Единственный способ, который я могу придумать для этого, — вручную определить каждый миксин:

@mixin spacing-pvs {
  padding-top: $spacing-small !important;
  padding-bottom: $spacing-small !important;
}
.pvs { @include spacing-pvs; }

Но существует около 56 стилей/примесей. Делать каждый по отдельности, как это, было бы больно писать и поддерживать.

Есть ли лучший способ сделать это в SASS/SCSS?


css sass mixins
person kikito    schedule 17.12.2012    source источник
comment
Вау, люди на самом деле так пишут CSS? Это самая болезненная вещь, о которой я могу думать. Кроме того, он злоупотребляет / злоупотребляет !important. Это в значительной степени пример того, почему OOCSS — это плохо.   -  person cimmanon    schedule 17.12.2012

Ответы (2)


arrow_upward
3
arrow_downward

Наиболее эффективным миксином будет такой (вам понадобится аналогичный миксин для отступов или добавьте дополнительный аргумент для переключения между отступами и отступами):

@mixin marginify($t: null, $r: null, $b: null, $l: null) {
    margin-top: $t;
    margin-right: $r;
    margin-bottom: $b;
    margin-left: $l;
}

.test {
    @include marginify($t: 10px, $b: 10px);
    color: green;
}

Что генерирует это:

.test {
  margin-top: 10px;
  margin-bottom: 10px;
  color: green;
}

null (доступно в Sass 3.2+) творит здесь свое волшебство: если переменная null, то она не генерирует для нее свойство. Тем не менее, вы должны отказаться от использования !important (большинство людей утверждают, что вы все равно должны использовать его только в крайнем случае). Использование этого миксина приведет к значительному раздуванию, потому что длинная форма всегда используется вместо сокращенной (margin: 10px 0), поэтому вам нужно использовать ее ответственно или написать более мощный миксин, который будет генерировать сокращенную форму, если это необходимо.

Тем не менее, использование миксина для этой цели (добавление полей) снижает читабельность вашего кода. Пока я не посмотрел весь источник, имена не имели смысла. Можно много говорить о читабельности ванильного CSS. Миксин marginify на самом деле не является шаблоном многократного использования, как могут быть миксины clearfix или inline-menu: написание миксина — это не просто сохранение нажатий клавиш.

person cimmanon    schedule 17.12.2012
comment
Спасибо за ответы. Я думаю, что нашел более простое решение (см. мой ответ), но +1 за ваши усилия и трюк null, о котором я не знал! - person kikito; 17.12.2012

arrow_upward
0
arrow_downward

В итоге я вообще не использовал миксины. Вместо этого я оставил правила CSS такими, какими они были, и использовал менее документированную функцию под названием @extend. Вот!:

.client-name {
  @extend .pvs; // this has the same padding properties as .pvs
}
person kikito    schedule 17.12.2012
comment
Посмотрите этот ответ, почему это решение - очень плохая идея: stackoverflow.com/questions/13284945/ - person cimmanon; 17.12.2012
comment
Ну, я не думаю, что это применимо к этому делу. Я не буду расширять классы CSS во всех моих правилах, как вы показываете в своем ответе. Может быть, в 5 или 10 местах (из ста). Лишние 10-20 строк сгенерированного CSS меня не беспокоят. - person kikito; 18.12.2012