如何使用变量干燥 Sass 代码？答案

【问题标题】：How to DRY Sass code using variables?如何使用变量干燥 Sass 代码？
【发布时间】：2011-06-22 11:55:39
【问题描述】：

我的设计使用颜色来识别网站的各个部分。我已经放置了一个定义了颜色变量的文件，因为它们可以更改并且很难通过 CSS 文件追踪它们。

$people: #D50000;
$galleries: #D500AA;
$projects: #D5BA00;
//etc...

我的类的名称与变量的名称相匹配。例如，导航菜单类似于：

<ul>
  <li class="people">People</div>
  <li class="galleries">Galleries</div>
  <li class="projects">Projects</div>
  <!-- etc... ->
</ul>

我发现自己在写 SASS 之类的

#nav {
  ul {
    li.people    { border-left: 5px solid $people;    }
    li.galleries { border-left: 5px solid $galleries; }
    li.projects  { border-left: 5px solid $projects;  }
  }
}

我想把它擦干。我曾尝试使用 mixins，但我不知道如何告诉 SASS 查找以我传递的参数命名的变量（变量间接）。我有类似的东西：

@mixin menu-states($resource) {
  li.#{$resource} a {                     // This works
    border-left: 7px solid $#{$resource}; // But this doesn't...
  }
}

有人对如何干燥这个有建议吗？谢谢。

【问题讨论】：

标签： ruby-on-rails css dry sass

【解决方案1】：

这段代码对我有用

@mixin test($resource: "red"){
    $updated: unquote($resource);
    li.#{$updated} a{
        border-left: 7px solid $updated;
    }
}

【讨论】：

【解决方案2】：

您不能这样做，但是您可以将 2 个变量传递给 mixin，一个用于类，另一个用于颜色。

【讨论】：

我想避免这种情况，但似乎是 Sass 的限制，毕竟这很好。我最终通过了这两个论点，感谢您的建议。