如何使用变量干掉Sass代码?

时间:2011-02-07 01:43:16

标签: ruby-on-rails css dry sass

我的设计使用颜色来识别网站的各个部分。我已经放置了一个定义了颜色变量的文件,因为它们可以更改,很难通过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...
  }
}

有人有关于如何干这个的建议吗?感谢。

2 个答案:

答案 0 :(得分:3)

此代码适合我

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

答案 1 :(得分:0)

你不能这样做,但你可以传入2个变量,一个用于类,另一个用于颜色到mixin。