sass 集合作为变量名

Question

也许我对 PHP 太着迷了。如果是这样的话，按指控有罪。

我为对我的网站很重要的 WordPress 类别命名了一组变量。每一个都对应一个 RGBA 值，如下所示：

// Category Styles:
$technology : rgba(91, 23, 102, 1);
$science    : rgba(186, 6, 38, 1);
$rochester  : rgba(224, 64, 28, 1);
$politics   : rgba(10, 82, 60, 1);
$journalism : rgba(224, 176, 11, 1);`

现在我想做的是创建一个 mixin，它会自动处理将这些颜色样式应用于类的大部分繁琐工作。这是我尝试的解决方案：

@mixin category-backgrounds( $collection: ( 'science', 'technology', 'politics', 'rochester', 'journalism' ) ) {
@each $category in $collection {
    .bg-#{$category} {
        background-color: $#{$category};
    }
    .fg-#{$category} {
        color: $#{$category};
    }
}
}

换句话说，我试图用集合元素的值代替变量的名称。我敢打赌，有一个简单的方法可以解决这个问题，但我是 SASS 和 Ruby 的新手。

当然，在 PHP 中，我可以有效地说 $$category，但在这里我不能。这似乎很大程度上是因为 #{} 插值在结果周围加上了引号。但是有没有办法做到这一点，我没有看到？还是更简单的方法？

非常感谢。

Answer 1

这样的事情应该这样做......

$categories: technology rgba(91, 23, 102, 1), science rgba(186, 6, 38, 1), rochester rgba(224, 64, 28, 1), politics rgba(10, 82, 60, 1), journalism rgba(224, 176, 11, 1);

@each $category in $categories {
    .bg-#{nth($category, 1)} {
        background-color: nth($category, 2);
    }

    .fg-#{nth($category, 1)} {
        color: nth($category, 2);
    }
}   

编译为：

.bg-technology {
  background-color: #5b1766;
}

.fg-technology {
  color: #5b1766;
}

.bg-science {
  background-color: #ba0626;
}

.fg-science {
  color: #ba0626;
}

.bg-rochester {
  background-color: #e0401c;
}

.fg-rochester {
  color: #e0401c;
}

.bg-politics {
  background-color: #0a523c;
}

.fg-politics {
  color: #0a523c;
}

.bg-journalism {
  background-color: #e0b00b;
}

.fg-journalism {
  color: #e0b00b;
}

Answer 2

@brbcoding 的答案会很好用，但新的（3.3 - 即将推出）版本的 Sass 通过添加“map”数据类型使其更加清晰。如果您能够开始使用预发行版，我推荐它：

$categories: (
    technology : rgba(91, 23, 102, 1), 
    science    : rgba(186, 6, 38, 1), 
    rochester  : rgba(224, 64, 28, 1), 
    politics   : rgba(10, 82, 60, 1), 
    journalism : rgba(224, 176, 11, 1),
);

@each $category, $color in $categories {
    .bg-#{$category)} {
        background-color: $color;
    }

    .fg-#{$category} {
        color: $color;
    }
}  

旁注：引号不是由#{} 语法生成的 - 您的变量声明中有引号。在您的情况下，不需要这些引号，您可以简单地删除它们。但是，这对您的问题没有帮助，因为 Sass 不允许您插入变量名。如果您确实需要声明中的引号并希望稍后删除它们，请使用#{unquote($string)}。