css - Sass Mixin 参数 - 阻止 Sass 转换分数(例如 1/3 转换为 0.33333)？

Question

情况

我有一个这样的 Mixin:

@mixin column($fraction: null) {
    // ...do stuff with $fraction
}

可以这样使用:

@include column('1/3');

请注意:

1. 传递了一个字符串
2. 我需要分母 (3) 来做一些第 n 个 child 的魔法。

这有效(使用 str-index + str-slice)。

问题

现在我想把引号设为可选。
这意味着，这也需要起作用:

@include column(1/3); // no quotes

Sass 将其视为数字。没关系。
但在我对变量做任何事情之前，它总是除法。

例子

包括:

@include column(1/3);

混合:

@mixin column($fraction: null) {
    $myVar: $fraction // $fraction equals '0.3333333' at this point already
}

有没有办法阻止 Sass 这样做？还是另一种获取分母的方法？

谢谢!

---

附加说明

关于使用逗号代替斜杠

正如@Johannes Reuter 所建议的，我可以只使用逗号而不是斜线:

@include column(1,3);

不幸的是，include 失去了一些意义。
使用“1/3”很明显该列的宽度为三分之一。我想保留它。

它特别容易混淆更多参数:

@include column(1, 3, 3, stacking);

对比

@include column(1/3, 3, stacking);

但非常感谢您的回答。

Answer 1

这是一个肮脏的把戏，但如果你使用参数列表，你得到的值没有除法，那么你必须转换为字符串以使用 str-slice 提取第二个值:

SASS

@mixin column($fraction...) {
  $fraction: $fraction + "";
  $n:str-slice($fraction, 3);
  &:nth-child(#{$n}){
    display:block;
  }
}

.class{
  @include column(1/3);
}

输出

.class:nth-child(3) {
  display: block;
}

PS:问题是如果你想使用更多的参数。不知道怎么解决。

---

2016 年 9 月 28 日更新

我找到了一种处理两个混入的方法，一个使用参数列表和 css 属性，另一个使用可变参数，我在其中提取除法运算符后的数字。

可变参数阻止进行除法，但所有参数都放在一起，如果我提取第一个参数，则除法再次进行。使用两个不同的 mixin，我可以使用可变参数并同时维护单独的参数:

SASS

@mixin column2($col, $gutter) { 
  width: $col * 100%;
  padding: $gutter;
}

@mixin column($args...) { 
  $args-str: inspect($args);
  $separator: str-index($args-str, ",");
  $separator2: str-index($args-str, "/");
  $fraction: str-slice($args-str, 1, $separator - 1);
  $cols: unquote(str-slice($fraction, $separator2 + 1));
  &:nth-child(#{$cols}){
    @include column2($args...);
  }
}

.class {
  @include column(1/3, 3px);
}

输出

.class:nth-child(3) {
  width: 33.33333%;
  padding: 3px;
}