Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

8 mai 2014 4 08 /05 /mai /2014 00:43

Pourquoi utiliser Less ? quelques exemples

  • Permet de définir des variables (couleurs, taille, chaine de caractères, etc.) syntaxe :  @nomvariable :valeur

  • Fonctions  exemple       color:fade(@main-forecolor,50%); 

  • Opérations exemple     font-size:@main-font-size + 10px;

  • Mixins

Exemple

/*.border-radius{

    border-radius:5px;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

 

}*/

.border-radius(@size:5px){

    border-radius:@size;

    -moz-border-radius:@size;

    -webkit-border-radius:@size;

 

}

Utilisations

   // .border-radius;

    .border-radius(10px);// ou  .border-radius()

  • Nested Rules

a{

    text-decoration:none;

    &:hover{

        text-decoration:underline;

    }

}

donne

a {

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

 

Ressources

http://lesscss.org/features/

Fonctions http://lesscss.org/functions/

Comparaison code généré dans Visual Studio  

 less7.png

Utilisation des outils de développement (exemple avec Chrome)

 less6.png

Dotless

http://www.dotlesscss.org/

Dans web.config : <dotless minifyCss="false" cache="true" web="false" />

On peut demander à minimiser le fichier css ;

Partager cet article

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article

commentaires