Sass/Compass Получение имя переменной из переменной

Question

Я пытаюсь сделать подмешать, что позволит мне создать адаптированные блоки кода в зависимости от того, что имя переменной вас в

$foo: #00A9EC; 
@mixin menu-color($color) { 
.color-#{$color} a.level2, 
.color-#{$color} a.level2:visited { 
    color: $color; 
    &:hover { 
     color: adjust-lightness($color, 10); } 
    &:active { 
     color: adjust-lightness($color, -10); } } } 

@include menu-color($foo); 

выходы:.

.color-foo a.level2, 
.color-foo a.level2:visited { 
    color: #00A9EC; } 

.color-foo a.level2:hover, 
.color-foo a.level2:visited:hover { 
     color: #20C0FF; } 

.color-foo a.level2:active, 
.color-foo a.level2:visited:active { 
     color: #0084B9; } 

Answer 1

Вы не должны указывать классы CSS после определенных цветов. Вы пожалеете об этом. Подумайте, если вы хотите сделать красный цвет позже, вам нужно будет вернуться на весь ваш html и изменить классы.

Причина, по которой у нас есть CSS, заключается в том, что вам не нужно вставлять информацию о стиле в разметку.

Используйте семантический класс теге описывает данные, не так, как он отображается:

$foo: #00A9EC; 

@mixin menu-color($name, $color) { 
.custom-#{$name} a.level2, 
.custom-#{$name} a.level2:visited { 
    color: $color; 
    &:hover { 
     color: adjust-lightness($color, 10); } 
    &:active { 
     color: adjust-lightness($color, -10); } } } 

@include menu-color(profile, $foo); 

А затем в вашем HTML <div class="custom-profile">.

Таким образом, через два года, когда вы захотите сделать его черным и подчеркнутым (или что-то еще), вам не нужно прорывать ваш html и добавлять новый «underlined-and-black-color» класс для всех этих элементов. Вы просто меняете свой SCSS в одном месте.