SASS(SCSS) - 如何添加类中的单个值

Question

我想在元素周围的填充物中添加2px。所以 padding: 10px 14px;会变成 padding: 14px 18px;。我该如何实现？

希望有一个比(psoudo代码(更优雅的解决方案：

$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>