Sass (SCSS) - 如何在 Class 中添加单个值

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 custom properties:

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>

Sass (SCSS) - 如何在 Class 中添加单个值

Sass (SCSS) - How to Add to Individual Values in a Class

sass

scss-mixins