开发者

Sharing LESS CSS variables with conditional comments

开发者 https://www.devze.com 2023-03-30 02:51 出处:网络
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.

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:

  1. You get all the variables from styles.less in ie.less.
  2. You get only one request on IE (it loads only one stylesheet).
0

精彩评论

暂无评论...
验证码 换一张
取 消