1

我使用 SASS @each 循环来生成一些 css 颜色类。在本地，一切都很好，但是当我将我的 rails 站点推送到 heroku 时，这些类不会生成。据我所知，所有其他 SASS 的东西都生成得很好。

我基本上设置了很多颜色变量，然后创建了一组颜色对，然后循环遍历它以生成（很多）类。

这是我的代码：

// =============================================================================
// Colors module
// =============================================================================

$white:     #fff;
$black:     #000;

$grey-1:    #111;
$grey-2:    #222;
$grey-3:    #333;
$grey-4:    #444;
$grey-5:    #555;
$grey-6:    #666;
$grey-7:    #777;
$grey-8:    #888;
$grey-9:    #999;
$grey-a:    #aaa;
$grey-b:    #bbb;
$grey-c:    #ccc;
$grey-d:    #ddd;
$grey-e:    #eee;
$yellow:    #fcd863;
$red:       #ed625e;
$brown:     #785952;
$turquoise: #588d8a;




$colors:  black $black $white,
          white $white $black,
          yellow $yellow $white,
          red $red $white,
          brown $brown $white,
          turquoise $turquoise $white,
          grey-1 $grey-1 $white,
          grey-2 $grey-2 $white,
          grey-3 $grey-3 $white,
          grey-4 $grey-4 $white,
          grey-5 $grey-5 $white,
          grey-6 $grey-6 $white,
          grey-7 $grey-7 $white,
          grey-8 $grey-8 $white,
          grey-9 $grey-9 $white,
          grey-a $grey-a $black,
          grey-b $grey-b $black,
          grey-c $grey-c $black,
          grey-d $grey-d $black,
          grey-e $grey-e $black;

@each $color in $colors {

  .is-#{nth($color, 1)} {
    background-color: nth($color, 2);
    color: nth($color, 3);

    .background-box {
      background-color: nth($color, 2);
      color: nth($color, 3);
    }
  }
}

可能有什么问题？：/

4

1 回答 1

0

As Cimmanon mentioned, it helped to look at the generated CSS. It turns out that SASS running on heroku translates the color names to hex values. Even the #{nth($color, 1)} one. I solved it by naming the classes .is-black-color instead of .is-black.

于 2013-06-10T18:04:30.337 回答