LESS - structurer le document

Question

J'ai commencé à utiliser LESS pour avoir un outil simple pour créer des fichiers .css.

Ma question est, quelle est la manière la plus courante de gérer cette classe construction css:

<div id="wrapper"> 
    <div id="left"> 
      <h2>Left</h2> 
    </div> 
    <div id="right"> 
      <h2>Right</h2> 
    </div> 
</div> 

Les boîtes #probablement et #right ont exactement la même feuille de style, h2 dans chaque boîte doit être différent .

je l'aurais résolu avec ce code:

#wrapper { 
    #left, #right { 
     width:50%; 
     float:left; 
    } 

    #left h2 { 
     color:black; 
    } 

    #right h2 { 
     color:red; 
    } 
} 

ou vous pouvez le résoudre comme ceci:

.left_right { 
    width:50%; 
    float:left; 
} 

#wrapper { 

    #left { 
     .left_right; 

     h2 { 
     color:black; 
     } 
    } 

    #right { 
      .left_right 

      h2 { 
     color:red; 
     } 
    } 
} 

Quelle est la façon dont la « bonne » ou est-ce juste un choix personnel. PS: Et est-il possible de mettre en surbrillance dans CODA pour les fichiers .less?

Merci

Answer 1

Préférence personnelle à coup sûr. Le premier exemple, pour moi, est plus facile à lire et devrait entraîner moins de CSS, ce qui est le but de MOINS après tout! En ce qui concerne la coloration syntaxique dans CODA, je ne l'utilise pas moi-même, ou avoir accès à un Mac en ce moment, mais une recherche rapide sur Google a abouti à quelques résultats.

Instructions pour une façon peuvent être trouvés ici: http://christophercasper.com/2010/09/less-syntax-highlighting-in-coda/

J'ai aussi trouvé un qu'il y avait un plugin pour CODA, mais il est maintenant transformé en son propre application. Je ne sais pas comment c'est utile, mais vous pouvez le trouver ici: http://incident57.com/less/