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);
}

我得到

body:before {
white-space: pre;
font-family: monospace;
content: "Error: Undefined variable: \"$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; 我会得到

Error: Mixin position is missing argument $sticky.\A

Answer 1

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

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

在您的代码中，您正在寻找 $sticky。您试图使用 $sticky 的未定义变量而不是参数 sticky 来调用混入。如果在调用 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

你实际上为任何位置值做了一个混合。变量名称是 'sticky' 但它可以包含任何值。这个：

@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
}

Sass mixin 位置置顶

Sass mixin position sticky

sass

mixins

例子