代码之家 › 专栏 › 技术社区 › Boris Grunwald

将值附加到sass mixin中的属性

sass

Boris Grunwald · 技术社区 · 4 年前

我有以下sass mixin:

@mixin absoluteCenterVertical {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

我希望能够将额外的转换属性传递到mixin,这样我就可以像

.element {
  @include absoluteCenterVertical(rotate(45deg))
}

将编译成

.element {
  position: absolute;
  top:50%;
  transform: translateY(-50%) rotate(45deg);
}

0 回复 | 直到 4 年前

miir 4 年前

你可以用 arguments

@mixin absoluteCenterVertical($extraTransformVals:) {
  transform: translateY(-50%) $extraTransformVals;
}

但是,以上要求始终传递参数 @include absoluteCenterVertical(rotate(90));

如果你想 optional argument 这样mixin就可以在不传递参数的情况下工作 @include absoluteCenterVertical; ,必须使用语法提供默认值 @mixin mixinName($argName: $defaultArgValue)

@mixin absoluteCenterVertical($extraTransformVals: noExtraValues) {
  @if $extraTransformVals == noExtraValues {
    transform: translateY(-50%);
  } @else {
    transform: translateY(-50%) $extraTransformVals;
  }
}

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前