1

我对这种混合的问题是我不能插值来调用指南针提供的不同精灵混合。

我希望能够在一个地方拥有它，在不同的 scss 中创建精灵，它们只包含这个共享的混合并使用它。

到目前为止，Sass 似乎不允许我这样做。也许我只是有一种疯狂而糟糕的做事方式（我真的不是设计师，几个月前我了解了 sass）。

谢谢你的时间。

@mixin icon-button($width, $height, $icon-bg-color, $icon, $sprite-name){
  .icon-base{
    width: $width;
    height: $height;
    background-color: $icon-bg-color;
    .icon{
      $icon-height: #{$sprite-name}-sprite-height(#{$icon});
      $icon-width: #{$sprite-name}-sprite-width(#{$icon});
      @include #{$sprite-name}-sprite(#{$icon});
      width: $icon-width;
      height: $icon-height;
      position: relative;
      left: ($width - $icon-width)/2;
      top: ($height - $icon-height)/2; 
    }
  }
}
4

1 回答 1

0

这#{something}是一种红宝石插值方式。Compass框架使用 ruby​​ 编译器从 scss/sass 生成 css。插值只是将一些值（变量的）插入字符串的方法，如下所示：如果您之前定义了变量，puts "I want to say #{smth}"将打印"I want to say something"到irb控制台。smth = "something"您可能还会注意到 ' 和 " 之间的区别。因此，有时您希望在 compass 中使用独立函数，如下所示：

headings(all) {
    color: $color;
}

将其编译成 css：

h1, h2, h3, h4, h5, h6 {
  color: #2a2a2a;
}

相反，它会引发错误。所以，要做到这一点，你需要插入函数的调用：

#{headings(all)} {
    color: $color;
}

它运行。但是，如果您尝试使用变量进行插值：

$color: #abc;
$color2: "#abc";

@mixin some($color) {
    color: #{$color};
}

也会抛出错误，因为在这种情况下插值输出字符串“#abc”。如果可以使用更简洁的样式，请尽量避免在指南针中使用 ruby​​ 语法。注意：如果有人可以解释更好的编译细节，我将不胜感激，因为我不是 ruby​​ist，我是 pythonist。

更新

检查此代码：

@mixin setFonting($from, $to, $size) {
    $curr: $from;
    $to: $to + 3;

    @while $curr != $to {
        h#{$curr} {
            font-size: $size;
        }
        $curr: $curr + 1;
        $size: $size + 2;
    }
}
@include setFonting(1, 3, 20px);

它编译为：

h1 {font-size: 20px;} h2 {font-size: 22px;} h3 {font-size: 24px;} h4 {font-size: 26px;} h5 {font-size: 28px;}

如您所见，#{}罗盘中的插值在用于定义选择器语句的大括号之外工作。

于 2013-07-26T09:59:25.470 回答