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中，当然，我可以有效地说$$类别，但在这里我不能。这似乎很大程度上是因为＃{}插值在结果周围加上了引号。但有没有办法做到这一点，我没有看到？还是一个更简单的方法？

非常感谢。

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的答案很有用，但是Sass的新版本（3.3即将发布）通过添加“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)}。

sass集合作为变量名称

2 个答案: