Teilen weniger CSS-Variablen mit bedingten Kommentaren

  • Ich habe ein LESS-Stylesheet styles.less mit einigen Variablen, auf die ich in meinem ie7.css-Stylesheet zugreifen muss, das mit bedingten Kommentaren geladen wird.

    < Ist es möglich, diese CSS-Variablen für die beiden Stylesheets verfügbar zu machen, da es sich hierbei um vollständig separate Stylesheets handelt und ich ie7.css in ie7.less konvertieren müsste?

    dh Ich möchte so etwas wie das Folgende machen können:

     # styles.less, always loaded
    @labelwidth: 150px;
    
    # ie7.less, sometimes loaded
    label{ margin-left: @labelwidth; }
     
    24 August 2011
    sscirrus
1 answer
  • Am besten verwenden Sie nur zwei verschiedene Stylesheets: eines für alle und eines für alle, das alle enthält. In HTML würde das mit intelligenten bedingten Kommentaren aussehen:

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

    Und das können Sie import styles.less:

     @import url(styles.less);
    
    /* Your styles for IE */
     

    Sie haben also zwei Vorteile:

    1. Sie erhalten alle Variablen von styles.less in ie.less.
    2. Sie erhalten nur eine Anforderung im IE (es wird nur ein Stylesheet geladen). < / li>
    24 August 2011
    kizu