Qu’est-ce que LESSCSS ? Comment utiliser ?

Qu'est-ce que LESSCSS

LESSCSS est un langage de style dynamique, qui est une sorte de langage de prétraitement CSS. Il utilise une syntaxe similaire à CSS et donne à CSS un langage dynamique. tels que les variables, l'héritage, les opérations, les fonctions, etc., facilitent l'écriture et la maintenance du CSS.

LESSCSS peut être utilisé dans plusieurs langues et environnements, y compris les navigateurs, les clients de bureau et les serveurs.

Aperçu rapide des fonctionnalités du langage :

Variables :

Les variables nous permettent de définir une série de styles communs séparément, puis de les appeler si nécessaire. Ainsi, lors des ajustements de style globaux, nous n’aurons peut-être besoin que de modifier quelques lignes de code.

Code source MOINS :

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

CSS compilé :

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

Mixins

Les mixins peuvent facilement introduire une classe A définie dans une autre classe B, réalisant ainsi simplement que la classe B hérite de tous les attributs de la classe A. Nous pouvons également l'appeler avec des paramètres, tout comme avec une fonction.

Code source MOINS :

.rounded-corners (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

CSS compilé :

#header {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
    border-radius: 5px;
}
#footer {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;
    border-radius: 10px;
}

Imbriqué

Nous pouvons imbriquer un sélecteur dans un autre sélecteur pour obtenir l'héritage, ce qui réduit considérablement la quantité de code et rend le code plus clair.

MOINS de code source :

Imbrication

Nous pouvons imbriquer un sélecteur dans un autre sélecteur pour obtenir l'héritage, ce qui réduit considérablement la quantité de code, et le code semble plus clair.

Code source MOINS :

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

CSS compilé :

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

Fonctions et opérations

Les opérations fournissent des opérations d'addition, de soustraction, de multiplication et de division ; nous pouvons effectuer des opérations sur les valeurs d'attribut et les couleurs, afin que des relations complexes entre les valeurs d'attribut puissent être réalisées. Les fonctions de LESS sont mappées au code JavaScript, vous permettant de manipuler les valeurs des propriétés si vous le souhaitez.

Code source MOINS :

the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

CSS compilé :

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!