如何保持SASS / SCSS混合的括号？ [英] How do I keep parentheses of SASS / SCSS mixin?

问题描述

我试图为一个CSS变换做一个SCSS混合，我想传递参数。

I'm attempting to make a SCSS mixin for a CSS transform and I want to pass in arguments. However, when using a variable the parentheses of my position value are removed.

一旦编译完成，它应该如何显示：

How it should look once compiled:

transform: translateX(-100px);

my mixin：

@mixin fadeup ($direction, $value) {
transform: translate#{$direction} ($value);
}

：

@include fadeup(X, 100px);

这可悲地输出：

transform: translateX 100px;

因此，100px值周围的括号丢失，因此不起作用。

So the parentheses surrounding the 100px value are missing, and so it won't work.

任何想法如何保持括号？

Any ideas how I can keep the parentheses?

推荐答案

你可以用 unquote 来帮助维护（） ...这样应该可以工作： p>

Seems to me that you could do it with a unquote to help maintain the ()... Something like this should work:

@mixin fadeup ($direction, $value) {
  transform: translate#{$direction}unquote("("#{$value}")");
}

.foo {
  @include fadeup(X, 100px);
}

.bar {
  @include fadeup(Y, 100px);
}

编译为：

.foo {
  transform: translateX(100px);
}

.bar {
  transform: translateY(100px);
}

这篇关于如何保持SASS / SCSS混合的括号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！