2014-05-26 4 views
1

У меня есть SASS mixin rem(), который преобразует значения единицы пикселя в rems, но включает резерв px для IE8. Например, вызов следующее:Использовать SASS для разделения стилей IE8 на отдельные таблицы стилей?

@include rem((padding: 15px)); 

будет генерировать что-то вроде:

padding: 15px; 
padding: 1.071rem; 

Проблема в том - для современных браузеров, я не хочу, чтобы включить пикс запасной вариант, так как он, добавив ненужное line CSS каждый раз, когда используется rem() mixin. Так что мой вопрос:

Вопрос: Есть ли способ для SASS (или SASS используется с чем-то еще), чтобы отделить каждый точек нейтрализация в отдельный т.е. таблицы стилей (например, «т.е.-8.css»)?

+1

Возможный дубликат [Компиляция и поддержка точных таблиц стилей] (http://stackoverflow.com/questions/12135803/compiling-and-maintaining-ie-specific-stylesheets) – cimmanon

+0

Также: http://stackoverflow.com/вопросы/15967175/вне-это возможно в использовании-а-Mixin-для-браузера-специфические-Css – cimmanon

ответ

-1

Я не думаю, что выход SASS может быть использован только SASS. Вероятно, вы могли бы написать небольшую небольшую рутину, которая сканирует ваш SASS для определенных селекторов как их визуализацию и обрабатывает результат соответственно, но это мне известно.

Стоит подумать о том, какое влияние оказывает запасной селектор на производительность. Неиспользованные селектора css have minimal impact при загрузке. С другой стороны, дополнительный HTTP-запрос для таблицы стилей IE8 плюс время применения этой таблицы стилей после загрузки базовых стилей - это, я думаю, более сложная задача. Независимо от того, зависит ли это от вас, зависит от того, сколько пользователей IE8 вы поддерживаете.

Средняя дорога может заключаться в применении IE-specific classes to your <html> tag или контейнере и изменении вашего микшина, так что резерв применяется только тогда, когда этот условный класс действует.

HTML

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> 

SASS

@mixin rem($padding) { 
    .ie8 & { 
     padding: $padding; 
    } 
    padding: //calculate your rem value, or vice versa 
} 

Я собрал немного jsfiddle, чтобы продемонстрировать подмешать.

Смежные вопросы