Как конвертировать именованный цвет в HEX с помощью SCSS?

Question

У меня есть подмешать с именованными цветами:

@mixin color-classes-rendering { 
    $colors: (
     rebeccapurple 
    ); 

    @each $value in $colors { 
     .#{nw}-#{nth($value, 1)}#{" > span"} { 
      background-color: nth($value, 1); 
     } 
    } 
} 

Здесь скомпилированный CSS:

.nw-rebeccapurple > span { 
    background-color: rebeccapurple; 
} 

Я не знаю, почему, но "rebeccapurple" не показанный в Chrome на Android. Можно ли преобразовать его в этом одно:

.nw-rebeccapurple > span { 
    background-color: #663399; 
} 

Answer 1

мое решение поставить значение HEX каждого имени цвета вручную, как это:

@mixin color-classes-rendering { 
    $colors: (
     rebeccapurple #663399, 
     black   #000000 
    ); 

    @each $value in $colors { 
     .#{nw}-#{nth($value, 1)}#{" > span"} { 
      background-color: nth($value, 2); 
     } 
    } 
} 

Answer 2

Хотя Sass действительно обеспечивает функции для извлечения индивидуальные значения R, G и B для любого заданного цвета, он не обеспечивает удобный способ преобразования этих значений в шестнадцатеричный. Вам будет проще преобразовать его в формат rgb().

$color: rebeccapurple; 

.foo { 
    color: #{'rgb(#{red($color)}, #{green($color)}, #{blue($color)})'}; 
} 

Выход:

.foo { 
    color: rgb(102, 51, 153); 
} 

Смотрите также: Why does Sass change the format of my colors?

---

Я хотел бы также отметить, что то, что вы написали до сих пор было бы лучше подходит для отображения:

$colors: (
    'rebeccapurple': #639, 
    'black': #000 
); 

@each $name, $color in $colors { 
    .nw-#{$name} > span { 
     background-color: $color; 
    } 
} 

O utput (сжатый формат):

.nw-rebeccapurple > span { background-color: #639; } 

.nw-black > span { background-color: #000; }