Остановите SASS от компиляции конечных пробелов в CSS

Я пытаюсь настроить таргетинг на IE 8 и 9 с помощью специального хака CSS, как показано здесь. Однако я использую SASS (в частности, расширение WebCompiler Visual Studio), и он компилирует конечные пробелы перед точкой с запятой. таким образом

.class{ display: none \ ;}

становится

.class { display: none \;}

и ломает взломать. Есть ли способ обойти это?

Источник

2 ответа

Решение

Если вам нужен пробел, вы можете объединить пустую строку.

SASS:

.class{ display: none \ +'';}

Выход:

.class {
  display: none \ ;
}
Источник

Я рекомендую использовать условные комментарии в html следующим образом:

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

И в CSS:

.class {display: block;}
.ie8 .class {display: none;}
.ie9 .class {display: none;}

Но если вы хотите поддерживать более чистый HTML и меньший CSS, вы можете использовать библиотеку Javascript для таргетинга на определенные браузеры, например, DetectJS, чтобы поместить имя и версию браузера в тег HTML как класс, генерировать отдельные таблицы стилей для каждого браузера, а затем вызывать их. в твоем воображении:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

Только помните, IE10 + не принимал условные комментарии.

Источник
Другие вопросы по тегам