Sass: использование резервной техники HSLa

Кто-нибудь знает обходной путь для включения объявлений цветов HSLa в таблицах стилей, скомпилированных SASS?

Я бы хотел использовать HSLa по причинам, описанным в этой статье Криса Койера. Резервный метод, рекомендуемый в Modernizr Docs, заключается в объявлении сначала шестнадцатеричного значения, за которым следует значение HSLa. для поддержки браузеров.

Однако способ, которым Sass в настоящее время реализует свой метод экземпляра hsla() делает невозможным использование этой техники — все значения HSLa компилируются в шестнадцатеричный формат, что означает, что шестнадцатеричный цвет просто повторяется.

Я попытался определить переменную цвета Sass как строку, но она компилируется в строку в кавычках в таблице стилей.

Может ли кто-нибудь предложить хак для получения вывода HSLa с помощью Sass?


css sass hsl
person cantera    schedule 16.11.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете преобразовать его в строку, а затем убрать из кавычек. Это предотвратит вызов функции Sass hsla():

.test {
    background-color: #e2ecf0; /* Fallback */
    background-color: unquote("hsla(190, 30%, 94%, 1)"); 
}

Генерирует:

.test {
  background-color: #e2ecf0;
  /* Fallback */
  background-color: hsla(190, 30%, 94%, 1);
}
person cimmanon    schedule 16.11.2012
comment
Это потрясающе - раньше не видел unquote(), это, вероятно, будет очень удобным инструментом. Спасибо большое - person cantera; 16.11.2012
comment
Но преимущества hsla (изложенные в статье) заключаются в том, насколько это важно для дизайнера. Именно по этой причине я постоянно использую его в Sass. Но если преимущество на вашей стороне, и Sass это позволяет, и вывод уже работает во всех браузерах без каких-либо негативных последствий, то какое вам дело до того, что это вывод hex/rgba? Стандартный вывод Sass на самом деле чище, чем запасной вариант. Зачем использовать запасной вариант, если можно просто использовать настоящую вещь, а Sass сделает преобразование за вас? - person Miriam Suzanne; 16.11.2012

arrow_upward
1
arrow_downward

Вы также можете использовать интерполяцию (#{}) и кавычки:

.test {
    background-color: #e2ecf0; // Fallback
    background-color: #{"hsla(190, 30%, 94%, 1)"}; 
}
person bookcasey    schedule 16.11.2012