Совместное использование LESS CSS переменных с условными комментариями - PullRequest
Новая
       31

Совместное использование LESS CSS переменных с условными комментариями

2 голосов
/ 24 августа 2011

У меня есть таблица стилей LESS styles.less с некоторыми переменными, к которым мне нужно получить доступ в моей таблице стилей ie7.css, которая загружается с помощью условных комментариев.

Учитывая, что это полностью отдельные таблицы стилей, и учитывая, чтоМне пришлось бы преобразовать ie7.css в ie7.less, могу ли я сделать эти CSS-переменные доступными в двух таблицах стилей?

т.е. я бы хотел сделать что-то вроде следующего: 

# styles.less, always loaded
@labelwidth: 150px;

# ie7.less, sometimes loaded
label{ margin-left: @labelwidth; }

1 Ответ

7 голосов
/ 24 августа 2011

Лучший способ сделать это - использовать только две разные таблицы стилей: одну для всех и одну для, т.е. включающую в себя все. Так, в HTML, используя умные условные комментарии, это выглядело бы так: 

<!--[if gt IE 7]><!-->
    <link rel="stylesheet" href="styles.less" />
<!--<![endif]--><!--[if lt IE 8]>
    <link rel=stylesheet href="ie.less">
<![endif]-->

А в ie.less можно импортировать styles.less: 

@import url(styles.less);

/* Your styles for IE */

Итак, вы получаете два преимущества:

  1. Вы получаете все переменные из styles.less в ie.less.
  2. Вы получаете только один запрос на IE (он загружает только одну таблицу стилей).
...