代码之家 › 专栏 › 技术社区 › Webwoman

如何在scss的函数或mixin中传递自定义属性?

sass

Webwoman · 技术社区 · 4 年前

我会直接将scss'中的属性名作为函数或mixin的参数传递。到目前为止,我无法将属性名作为参数传递。

@mixin buttonSide($buttonSide){
    $buttonSide:10vw;
}


.form__previous-button{
    @include buttonSide(left); // I have also tried with @include buttonSide("left")
}

到目前为止它失败了。你知道在scss中将属性作为变量传递的方法吗?

0 回复 | 直到 4 年前

Sebastian Brosch Navjyot 4 年前

你必须使用 interpolation on property declarations

动态生成一个插值属性,可以根据需要生成一个属性。你甚至可以插入整个属性名!

萨斯

@mixin buttonSide($buttonSide)
  #{$buttonSide}: 10vw

.form__previous-button
  @include buttonSide(left)

@mixin buttonSide($buttonSide) {
  #{$buttonSide}: 10vw;
}

.form__previous-button {
  @include buttonSide(left);
}

推荐文章

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 年前