Sharing LESS CSS variables with conditional comments
I have a LESS stylesheet styles.less
with some variables that I need to access in my ie7.css
stylesheet, which is loaded using conditional comments.
Given that these are entirely separate stylesheets, and given that I would have to convert ie7.css
to ie7.less
, i开发者_如何学Pythons it possible for me to make these CSS variables available across the two stylesheets?
i.e. I would like to be able to do something like the following:
# styles.less, always loaded
@labelwidth: 150px;
# ie7.less, sometimes loaded
label{ margin-left: @labelwidth; }
The best way of doing so is to use only two different stylesheets: one for everyone and one for ie, which includes the everyone's. So, in HTML, using smart Conditional Comments it would look like:
<!--[if gt IE 7]><!-->
<link rel="stylesheet" href="styles.less" />
<!--<![endif]--><!--[if lt IE 8]>
<link rel=stylesheet href="ie.less">
<![endif]-->
And in ie.less
you can import styles.less
:
@import url(styles.less);
/* Your styles for IE */
So, you gain two benefits:
- You get all the variables from
styles.less
inie.less
. - You get only one request on IE (it loads only one stylesheet).
精彩评论