Sass mixin 位置粘滞

Question

这是我使用 SASS 的第一天，如果这听起来很简单，我很抱歉。

我正在尝试为我目前拥有的position: sticky; 应用 mixin：

@mixin position($sticky) {
  -webkit-position: $sticky;
     -moz-position: $sticky;
      -ms-position: $sticky;
       -o-position: $sticky;
          position: $sticky;
}

.menu-link{
    z-index: 12;
    @include position($sticky);
}

我来了

正文：之前 {
空白：pre;
字体系列：等宽；
内容：“错误：未定义的变量：\”$sticky\”.\A on line 70

我从这个例子开始工作：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

我看到我没有定义 (10px) 或等效项，但我认为没有任何东西可以放在这里作为位置，所以我不确定为什么在这种情况下我会得到未定义的变量。

如果我只是输入@include position; 我会得到

错误：混合位置缺少参数 $sticky.\A

Answer 1

我认为您的意思是使用 .menu-link { @include position(sticky); } 而不是 $sticky。您正在尝试使用 SASS 变量，而不是 CSS 属性。

在您从中提取的示例中，mixin 正在寻找参数$radius。 参数以 10px 的形式传入，因此在 mixin $radius = 10px 中。

在您的代码中，您正在寻找$sticky。您尝试使用未定义的变量 $sticky 而不是参数sticky 来调用mixin。如果在调用 mixin 之前已经定义了变量名，则可以使用它。

示例

@mixin position($sticky) {
  -webkit-position: $sticky;
  -moz-position: $sticky;
  -ms-position: $sticky;
   -o-position: $sticky;
      position: $sticky;
}

$sticky: sticky;

.menu-link{
  z-index: 12;
  @include position($sticky);
}

Answer 2

您实际上为任何位置值创建了一个 mixin。变量名称是“粘性的”，但它可以保存任何值。这个：

@mixin position($sticky) {
  -webkit-position: $sticky;
  -moz-position: $sticky;
  -ms-position: $sticky;
   -o-position: $sticky;
      position: $sticky;
}

等价于：

@mixin position($pos) {
  -webkit-position: $pos;
  -moz-position: $pos;
  -ms-position: $pos;
   -o-position: $pos;
      position: $pos;
}

它适用于任何位置值：

.menu-link{
  z-index: 12;
  @include position(sticky);
  @include position(relative);
  @include position(absolute);
}

如果只是对位置感兴趣：粘性；

@mixin stickyPosition {
  -webkit-position: sticky;
  -moz-position: sticky;
  -ms-position: sticky;
   -o-position: sticky;
      position: sticky;
}

.menu-link{
      z-index: 12;
      @include stickyPosition;
}

我希望它有所帮助。 :)

Answer 3

您可能可以通过使用一些浏览器前缀函数来稍微清理一下，这样您就不必写出浏览器前缀。

@mixin prefix($declarations, $prefixes: ()) {
   @each $property, $value in $declarations {
      @each $prefix in $prefixes {
         #{'-' + $prefix + '-' + $property}: $value;
      }
      // Output standard non-prefixed declaration
      #{$property}: $value;
   }
}

.menu {
    &-link {
       @prefix((position: sticky), webkit moz ms o);
       z-index:12;
    }
    // other menu classes
}