Sass (SCSS) - Как добавить к отдельным значениям в классе

Question

Я хочу добавить 2px к отступу вокруг элемента.Так что padding: 10px 14px; станет padding: 14px 18px;.Как я могу достичь этого?

Надеюсь, есть более элегантное решение, чем (псевдо-код):

$horizontal-padding: 10;
$vertical-padding: 14;

.normal-padding {
    padding-top: $vertical-padding;
    padding-right: $horizontal-padding;
    padding-bottom: $vertical-padding;
    padding-left: $horizontal-padding;
}

.extra-padding {
    ($horizontal-padding + 2 + px), ($vertical-padding + 2 + px);
}

Конечно, должен быть лучший способ?

Answer 1

На самом деле, вы можете написать это разными способами. Решение, подобное вашему коду, может быть:

$vertical-padding: 14px;
$horizontal-padding: 10px;

.normal-padding {
  padding: $vertical-padding $horizontal-padding;
}

.normal-padding {
  $extra: 2px;
  padding: #{$vertical-padding + $extra} #{$horizontal-padding + $extra};
}

Более динамичный способ (не очень полезный, если у вас есть только эти два варианта):

@mixin padding($extra : 0) {
  padding: #{14 + $extra}px #{10 + $extra}px;
}

.normal-padding {
  @include padding;
}

.extra-padding {
  @include padding(2);
}

Вы даже можете изменить приведенный выше код, чтобы сохранить переменные $vertical-padding и $horizontal-padding. Как я уже сказал, есть много способов сделать это.

Answer 2

Просто для удовольствия. Вы можете использовать css пользовательские свойства :

div {
  border: 1px solid;
}

:root {
  /* declare global variables */
  --padding-x: 10px;
  --padding-y: 10px;
}

.padded {
  padding: var(--padding-y) var(--padding-x);
}

.extra {
  /* redefine variables for `extra` elements */
  --padding-x: 30px;
  --padding-y: 30px;
}

<div class="padded"></div>

<div class="padded extra"></div>