Как высушить код 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

Вы не можете это сделать, однако вы можете передать 2 переменные, одну для класса и другую для цвета mixin.

Answer 2

этот код работает для меня

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