用于偏移定位的Mixin

如果有一种速记CSS可能会严重遗漏，那么可以通过它来定义position属性以及四个偏移属性（ top ， right ， bottom ， left ）。

幸运的是，这通常可以通过CSS预处理程序（如Sass）解决。 我们只需要构建一个简单的mixin即可避免手动声明5个属性。

/// Shorthand mixin for offset positioning
/// @param {String} $position - Either `relative`, `absolute` or `fixed`
/// @param {Length} $top [null] - Top offset
/// @param {Length} $right [null] - Right offset
/// @param {Length} $bottom [null] - Bottom offset
/// @param {Length} $left [null] - Left offset
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

现在的问题是，使用此mixin时，我们依赖于命名参数，以避免在只需要一个或两个参数时必须全部设置它们。 考虑以下代码：

.foo {
  @include position(absolute, $top: 1em, $left: 50%);
}

…编译成：

.foo {
  position: absolute;
  top: 1em;
  left: 50%;
}

实际上，Sass永远不会输出具有null值的属性。

简化API

我们可以将仓位类型移动到混合名称，而不必将其定义为第一个参数。 为此，我们需要三个额外的mixin，它们将用作我们刚刚定义的“ position” mixin的别名。

/// Shorthand mixin for absolute positioning
/// Serves as an alias for `position(absolute, ...)`
/// @param {Arglist} $args - Offsets
/// @require {mixin} position
@mixin absolute($args...) {
  @include position(absolute, $args...);
}

/// Shorthand mixin for relative positioning
/// Serves as an alias for `position(relative, ...)`
/// @param {Arglist} $args - Offsets
/// @require {mixin} position
@mixin relative($args...) {
  @include position(relative, $args...);
}

/// Shorthand mixin for fixed positioning
/// Serves as an alias for `position(fixed, ...)`
/// @param {Arglist} $args - Offsets
/// @require {mixin} position
@mixin fixed($args...) {
  @include position(fixed, $args...);
}

重写我们之前的示例：

.foo {
  @include absolute($top: 1em, $left: 50%);
}

更进一步

如果您想要一种更接近Nib （Stylus的框架） 提出的语法，我建议您看一下本文 。

.foo {
  @include absolute(top 1em left 50%);
}

翻译自: https://css-tricks.com/snippets/sass/mixin-offset-positioning/