Question

所以我试图将修饰符传递给SASS mixin：

$headerHeight: 40px;
@mixin hh($prop, $mod: " + 0") {
    #{$prop}: #{$headerHeight + $mod};
}

.something {
    @include hh(padding-top, " * 2"); // Should return padding-top: 80px;
}

无论我多少次尝试并取消引用它，我都会像padding-top: 40px + 0;这样的东西。是不是可以在mixin中评估数学字符串？

我已经在$ headerHeight上没有px的情况下尝试过了，但这似乎也不起作用。

我可以这样做：

@mixin hh($prop, $aMod: 0px, $mMod: 1) {
  #{$prop}: ($headerHeight + $aMod) * $mMod;
}

但我更喜欢能够在其中放置任意数学字符串，而不必分解数学的加法和乘法方面。

由于

Answer 1

我不认为这是可能的，你可以做类似以下的事情来达到同样的目标：

$headerHeight: 40;
@mixin hh($prop, $mod, $modval) {
  @if $mod == '+' {
    #{$prop}: $headerHeight + $modval * 1px;  
  }
  @if $mod == '-' {
    #{$prop}: $headerHeight - $modval * 1px;  
  }
  @if $mod == '*' {
    #{$prop}: $headerHeight * $modval * 1px;  
  }
  @if $mod == '/' {
    #{$prop}: $headerHeight / $modval * 1px;  
  }
}

.something {
  @include hh(padding-top, '*', 2); // Should return padding-top: 80px;
}

http://sassmeister.com/gist/be55fe73c307d0ad018c

Answer 2

不幸的是，你必须做一些像创建函数的东西，你可以在你的mixin中使用call()函数调用它们：

@function plus($i, $j: 0) {
  @return $i + $j;
}

@function times($i, $j: 0) {
  @return $i * $j;
}

$headerHeight: 40px;
@mixin hh($prop, $func, $mod) {
    #{$prop}: call($func, $headerHeight, $mod);
}

.something {
    @include hh(padding-top, 'plus', 2); // 42px
    @include hh(padding-bottom, 'times', 2); // 80px
}

Sass将引用的数学字符串传递给mixin

2 个答案: