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

我正在

身体：在{
。之前     white-space：pre;
    font-family：monospace;
    内容：＆＃34;错误：未定义变量：\＆＃34; $ sticky \＆＃34;。\ A在第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;我

错误：Mixin位置缺少参数$ 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。变量名是“粘”＆＃39;但它可以保持任何价值。这样：

@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位置粘

3 个答案:

实施例