Commencer avec moins

Installation ou configuration

Less a été l’un des préprocesseurs CSS les plus populaires et a également été largement déployé dans de nombreux frameworks frontaux tels que Bootstrap, Foundation, etc. Le compilateur Less est un compilateur basé sur JavaScript, qui peut être obtenu à partir d’un réseau de diffusion de contenu. :

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

Vous devez ajouter votre document Less avant que le compilateur JavaScript ne soit chargé, en utilisant la balise <link />. La feuille de style Less avec le compilateur ressemble à ceci :

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

Remarque : Compiler Less côté client (ou dans le navigateur) n’est généralement pas recommandé. Il ne doit être utilisé que pour le développement ou lors de l’utilisation de paramètres dynamiques qui rendent impossible la compilation côté serveur.

Échantillonner moins de syntaxe

L’exemple suivant est un exemple de fichier Less qui montre comment les variables sont déclarées et utilisées, comment les mixins sont définis et appelés dans Less.

/* Variables */
@color-base: #87ceeb;

/* Simple mixin to set border */

.set-border(@width; @style; @color) {
  border: @width @style darken(@color, 10%);
}

/* Main CSS */
.class1 {
  background-color: @color-base;
  .set-border(1px; solid; @color-base);
  .class2 {
    background-color: #fff;
    color: @color-base;
    .set-border(1px; solid; #fff);
  }
}

Le code ci-dessus, une fois compilé, produira le CSS suivant : (les commentaires sont supprimés par souci de brièveté)

.class1 {
  background-color: #87ceeb;
  border: 1px solid #5bbce4;
}
.class1 .class2 {
  background-color: #fff;
  color: #87ceeb;
  border: 1px solid #e6e6e6;
}

Compilation d’un fichier Less depuis la ligne de commande

lessc [options] <source> [destination]

La commande ci-dessus est utilisée pour compiler les fichiers Less dans la ligne de commande. Les options sont les différents paramètres que le compilateur doit utiliser soit pendant la compilation, soit après la compilation. Les options incluent -x ou --compress pour compresser ou réduire le fichier CSS de sortie, -sm=on ou --strict-math=on pour appliquer des opérations mathématiques uniquement sur les valeurs entre parenthèses, etc. vient ensuite le chemin du fichier source Less qui doit être compilé. Destination est le chemin et le nom du fichier de sortie. Si cela n’est pas fourni, la sortie est imprimée dans la fenêtre de ligne de commande elle-même.

Considérez le code moins ci-dessous

/* Filename: test.less */
#demo {
 color: @color;
 background: beige;
 width: 100% / 4;
}
@color: red;

Imprimer le CSS compilé dans la fenêtre de commande :

Lorsque la commande suivante est exécutée dans la ligne de commande, le fichier test.less sera compilé et la sortie sera imprimée directement sur la fenêtre de commande car aucun chemin de destination n’est fourni.

lessc test.less

Production:

#demo {
  color: red;
  background: beige;
  width: 25%;
}

Créez un fichier CSS et écrivez la sortie compilée dans le fichier :

Le même fichier lorsqu’il est compilé avec l’instruction ci-dessous créera un fichier nommé test.css dans le même chemin que le fichier test.less et imprimera/écrira la sortie dans ce fichier CSS.

lessc test.less > test.css

Créez un fichier CSS et minimisez-le :

La commande ci-dessous imprimera/écrira la sortie dans un fichier CSS et la compressera également à la fin.

lessc -x test.less > test.css

Production:

#demo{color:red;background:beige;width:25%}

Avec l’option Strict Math activée :

Lorsque l’option de correspondance stricte est activée, la sortie sera la suivante car les valeurs de width ne sont pas entre accolades.

lessc -sm=on test.less > test.css

Production:

#demo {
  color: red;
  background: beige;
  width: 100% / 4;
}

Imbriquer dans moins

Dans Less, vous pouvez écrire des règles CSS beaucoup plus simples et les garder bien formatées, donc au lieu d’écrire ce code :

CSS

.item {
  border: 1px solid;
  padding: 4px;
}
.item .content, .item .image {
  float: left;
}
.item .content {
  font-size: 12px;
}
.item .image {
  width: 300px;
}

tu peux juste écrire ceci :

Moins

.item {
  border: 1px solid;
  padding: 4px;
  .content, .image {
    float: left;
  }
  .content {
    font-size: 12px;
  }
  .image {
    width: 300px;
  }
}

and Less compilera ce code dans le CSS normal que nous connaissons tous.

Joindre des fichiers - Importations

L’instruction @import vous permet d’insérer le code CSS/Less d’un autre fichier dans votre propre fichier CSS/Less.

.foo {
  background: #900;
}
@import "my-other-css-file.css";
@import "my-other-less-file.less";