Question

我想为元素周围的填充物添加2px。所以 Context 会变成 Configuration。我该如何实现？

希望有比（伪代码）更优雅的解决方案：

DisplayMetrics

肯定有更好的方法吗？

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）-如何在类中添加单个值

2 个答案: