Хотите сделать миксин Sass более надежным (сокращение шрифтов)

К вашему сведению, я ни в коем случае не гуру Sass, я все еще учусь.

Я обнаружил силу аргументов в миксинах ... и теперь хочу использовать их постоянно :)

Описание

Я использую веб-шрифт, у него 3 семейства: обычный, полужирный и курсив. Итак, я сделал следующий миксин:

@mixin ffArsenal($style:regular) { font-family:arsenal-+$style, Arial, "Helvetica Neue", Helvetica, sans-serif; }

Я могу использовать его одним из нескольких способов:

  1. @include ffArsenal();
  2. @include ffArsenal(bold);
  3. @include ffArsenal(italic);

И я получаю следующие результаты:

  1. font-family: arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  2. font-family: arsenal-bold, Arial, "Helvetica Neue", Helvetica, sans-serif;
  3. font-family: arsenal-italic, Arial, "Helvetica Neue", Helvetica, sans-serif;

Пока все хорошо, пока ...

Проблема

Мне нужно объявить font-size или line-height. Если я хочу это сделать, я предпочитаю использовать сокращенный стиль шрифта, а не объявлять все свойства по отдельности.

Поэтому, если я хочу добавить к шрифту font-size и line-height, в простом CSS я бы сделал:

font: 1.6rem/1.1 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

Дело в том, что с приведенным выше миксином я не могу использовать сокращение.

Вопрос

Как сделать этот миксин шрифтов чем-то более надежным, что можно было бы использовать аналогично любой из этих идей (эти идеи являются всего лишь гипотезой, они, очевидно, не работают):

  1. @include ffArsenal(); [будет использовать значения по умолчанию]
  2. @include ffArsenal(1.1rem);
  3. @include ffArsenal(1.1rem,1.8);
  4. @include ffArsenal(1.8);

И результаты будут:

  1. font: 1.6rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif; [значения по умолчанию]
  2. font: 1.1rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  3. font: 1.1rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  4. font: 1.6rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

Цель

Конечно, в этом случае используется конкретный шрифт, но идея состоит в том, что этот миксин можно использовать с любым другим семейством шрифтов, чтобы легко объявить сокращенный стиль шрифта с минимальным набором текста и максимальным использованием «DRY».

Заранее благодарим за любую помощь по этому поводу.


fonts css sass mixins
person Ricardo Zea    schedule 01.05.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не получите то, что хотите, используя миксины, если только вы не захотите перепрыгнуть через множество обручей (плюс, это будет некрасиво в использовании). Самый простой способ - использовать функцию (которая имеет дополнительный бонус, больше похожий на естественный CSS):

@function arsenal($type: regular) {
    @return arsenal-#{$type}, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.foo {
    font-family: arsenal();
    font: 1.1rem arsenal();
    font: 1.1rem/1.8 arsenal();
    font: 1.1rem arsenal(bold);
}

Выход:

.foo {
  font-family: arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem arsenal-bold, Arial, "Helvetica Neue", Helvetica, sans-serif;
}
person cimmanon    schedule 01.05.2014
comment
@cinmmanon Это именно то, что я искал, спасибо! То, как я видел свою проблему и решение, было очень специфическим (и явно узким), но с такими профессионалами, как вы, и решением, которое вы мне предоставили, это то, что делает SO таким ценным. Очевидно, решение очень помогает, но я вижу наибольшую ценность в том, что такие ответы, как ваш, учат других ДУМАТЬ. До сих пор понятия не имел о функциях :). Большое спасибо, чувак! - person Ricardo Zea; 02.05.2014