如何使用變量使Sass代碼干燥？

Question

我的設計使用顏色來標識網站的各個部分。 我放置了一個定義了顏色變量的文件，因為它們可以更改，並且很難在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...
  }
}

有人對如何干燥這個有建議嗎？ 謝謝。

Answer 1

該代碼對我有用

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

Answer 2

您不能這樣做，但是可以將2個變量傳遞給mixin，一個用於類，另一個用於顏色。