Как СУХОЙ код 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;  }
  }
}

который я бы хотел высушить. Я пытался использовать миксины, но я не знаю, как сказать 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 переменные, одну для класса и другую для цвета, в миксин.