Introduction aux méthodes d'utilisation de moins (variables, mélange, appariement, opérations, imbrication)

高洛峰

Libérer： 2017-03-17 10:30:34

original

1799 Les gens l'ont consulté

Comment utiliser moins et certains éléments couramment utilisés (variables, mélange, correspondance, opérations, imbrication)

Moins d'outils d'introduction et de compilation

Qu'est-ce qui est moins

1.LESSCSS est un langage de style dynamique et un type de langage de prétraitement CSS. Il utilise une syntaxe similaire au CSS et donne au CSS les caractéristiques d'un langage dynamique, telles que les variables, l'l'héritage, opérations, fonctions, etc., facilitant l'écriture et la maintenance du CSS.
LESSCSS peut être utilisé dans plusieurs langues et environnements, notamment les navigateurs, les clients de bureau et les serveurs.

moins d'outil de compilation

Koala Koala -- s'il n'y a pas de dossier CSS créé lors de la compilation, Koala en générera automatiquement un pour vous
Comment définir la langue

Comment compiler
-
Laisser Webstorm prendre en charge moins de compilation :

Installer node.js --- Il s'agit d'un outil de gestion de packages qui sera utilisé à l'avenir
WIN R
Entrez npm install less

....

moins de grammaire

Ps : Les points de connaissance suivants utiliseront les points de connaissance ci-dessus (par exemple, des variables seront utilisées dans le mixage pour approfondir l'impression ^_^)

Commentaire

// Affiché uniquement en moins
/**/ sera

variable

moins est affichée dans le fichier CSS
```
@ly_width:100px;
.box {
width:@ly_width;
}
```
Copier après la connexion
Après la compilation, ce qui est affiché en CSS est
```
.box {
width:100px;
}
```
Copier après la connexion

Utilisez @

pour. définir des variables

Mixtes

Résoudre la compatibilité bordure-rayon

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

Copier après la connexion

moins d'écriture

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px;) {
border:@border_width solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border();
}

Copier après la connexion

Après compilation, ce qui est affiché en css est

.one {
width: 100px;
height: 200px;
background-color: #008000;
border: 3px solid #ff0000;
}

Copier après la connexion

moins écrit en

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
border:@border_width solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border(1px);
}

Copier après la connexion

Après compilation, ce qui est affiché en CSS est

.one {
width: 100px;
height: 200px;
background-color: #008000;
border: 1px solid #ff0000;
}

Copier après la connexion

Premièrement, si vous souhaitez utiliser le code en moins Que dois-je faire si j'applique le style .border dans .one

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
border:1px solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
}

Copier après la connexion

s'écrit comme suit

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
border:1px solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border;
}

Copier après la connexion

après compilation en CSS Montré est

.border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

Mélanger sans paramètres
Mélanger avec paramètres -- -Sans valeur par défaut (vous pouvez passer plusieurs paramètres, séparés par des virgules ou des points-virgules, il est recommandé d'utiliser des points-virgules. Ce qui suit prend un paramètre comme exemple)
Mélange avec des paramètres --- Avec valeur par défaut (plusieurs paramètres peuvent être transmis, un paramètre est utilisé comme exemple)
Il est souvent utilisé lors de la résolution de la compatibilité CSS3

Modèle de correspondance

Écrire en moins

//定义上,下,左,右边框的样式
.border(top;@border_width:5px;@border_color:red){
border-top:@border_width solid @border_color;
}
.border(bottom;@border_width:5px;@border_color:red){
border-bottom:@border_width solid @border_color;
}
.border(left;@border_width:5px;@border_color:red){
border-left:@border_width solid @border_color;
}
.border(right;@border_width:5px;@border_color:red){
border-right:@border_width solid @border_color;
}
//如果想写通用的样式 可以在下面的代码中写 格式是固定的 
.border(@_,@border_width:5px;@border_color:red){
border-color:yellow;
}
.border_use1 {
//选择和if差不多 如果是left就调用上面对应的
.border(left);
}
.border_use2 {
//选择和if差不多 如果是right就调用上面对应的
.border(right);
}

Copier après la connexion

Après compilation, ce qui est affiché en CSS est

.border_use1 {
border-left:5px solid #ff0000;
border-color:yellow;
}
.border_use2 {
border-right:5px solid #ff0000;
border-color:yellow;
}

Copier après la connexion

peut être compris comme s'il était quelque peu similaire au mélange ci-dessus

Fonctionnement

@ly_width:100px;
.one {
width:@ly_widht + 100;
}

Copier après la connexion

```
.one {
width:200px;
}
```
Copier après la connexion

Imbrication

<p class="one">
<p class="two"></p>
</p>

Copier après la connexion

@ly_width:100px;
@ly_height:200px;
@ly_color:red;
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.two {
    background-color: green;
}
}

Copier après la connexion

.one {
width: 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}

Copier après la connexion

@arguments variable

//和前面提到的混合一起举个栗子  
.border(@border_width;@border_style;@border_color){
border:@arguments;
}
.one {
.border(1px;solid;red);
}

Copier après la connexion

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!