Répertoire des articles de la série
Annuaire d'articles
1. Moins variable
1. Variables de sélection
Rendre le sélecteur dynamique
fichier index.html
- sélecteurs d'identifiant et de classe
<div id="wrap">
Hello Less!
</div>
<div class="wrap">
Hello World!
</div>
fichier index.less
- La première consiste à déterminer le type de sélecteur (id selector)
- Le second est indéterminé Le type de sélecteur (id/class selector)
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
@{
mySelector} {
color: #ccc;
width: 50%;
}
.@{
wrap} {
color: skyblue;
width: 50%;
}
#@{
wrap} {
color: aqua;
width: 50%;
}
fichier index.css
- fichier css automatiquement échappé
#wrap {
color: #ccc;
width: 50%;
}
.wrap {
color: skyblue;
width: 50%;
}
#wrap {
color: aqua;
width: 50%;
}
2. Variables d'attribut
Réduire l'écriture de code
fichier index.html
Remarque : Il s'agit d'une structure HTML publique utilisée dans les tests suivants.
<div id="wrap">
Hello Less!
</div>
fichier index.less
- variable de propriété, définir la propriété
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
// 属性变量
@borderStyle: border-style;
@solid: solid;
@{
mySelector} {
@{
borderStyle}: @solid;
}
fichier index.css
- fichier css automatiquement échappé
#wrap {
border-style: solid;
}
3. variable d'url
Lorsque la structure du projet change, modifiez ses variables pour
fichier index.less
@images: "../../img";
body {
background: url("@{images}/xxx.png");
}
fichier index.css
- fichier css automatiquement échappé
body {
background: url("../../img/xxx.png");
}
4. Déclarez des variables
Structure : @nom : {propriété : valeur}
Nom d'utilisation()
Exemple : Contenu excédentaire, ...indiqué
fichier index.less
@Rules: {
width: 60px;
height: 30px;
border: 1px solid #ccc;
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
#wrap {
@Rules();
}
fichier index.css
- fichier css automatiquement échappé
#wrap {
width: 60px;
height: 30px;
border: 1px solid #ccc;
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
5. Fonctionnement variable
- Lors de l'addition ou de la soustraction, l'unité de la première donnée est utilisée comme base
- Lors de la multiplication et de la division, faites attention à l'unité doit être unifiée
- Notez l'espace
fichier index.less
@width: 300px;
@color: #ccc;
#wrap {
width: @width - 20;
height: @width - 20 * 2;
margin: (@width - 200) * 2;
color: @color*1;
background-color: @color + #111;
}
fichier index.css
- fichier css automatiquement échappé
#wrap {
width: 280px;
height: 260px;
margin: 200px;
color: #cccccc;
background-color: #dddddd;
}
6. Portée des variables
Le principe de proximité
fichier index.less
@var:@a;
@a:100%;
#wrap {
width: @var;
@a:9%;
border: 1px solid #ccc;
}
fichier index.css
- fichier css automatiquement échappé
#wrap {
width: 9%;
border: 1px solid #ccc;
}
7. Utiliser des variables pour définir des variables
fichier index.less
@fond:@var;
@var:'fond';
#wrap::after {
content: @var;
}
fichier index.css
- fichier css automatiquement échappé
#wrap::after {
content: 'fond';
}
2. Moins d'imbrication
1. Utilisation de &
& : le nom du sélecteur précédent
fichier index.html
- Plusieurs niveaux d'imbrication
<div class="center">
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</div>
fichier index.less
- & : le nom du sélecteur précédent
- Inscriptible ou non
.center {
width: 100px;
height: 100px;
background: red;
& #list {
width: 50px;
height: 50px;
background: skyblue;
li {
width: 20px;
height: 20px;
background: #ccc;
}
}
}
fichier index.css
- fichier css automatiquement échappé
.center {
width: 100px;
height: 100px;
background: red;
}
.center #list {
width: 50px;
height: 50px;
background: skyblue;
}
.center #list li {
width: 20px;
height: 20px;
background: #ccc;
}
2. Demandes des médias
fichier index.less
#main {
@media screen {
@media (max-width: 768px) {
width: 100px;
}
}
@media tv {
width: 2000px;
}
}
fichier index.css
- fichier css automatiquement échappé
@media screen and (max-width: 768px) {
#main {
width: 100px;
}
}
@media tv {
#main {
width: 2000px;
}
}
3. Astuces : Ajoutez des styles privés
Exemple : mise en œuvre du changement de style de masqué à affiché
fichier index.less
#main {
&.show {
display: block;
}
}
.show {
display: none;
}
fichier index.css
- fichier css automatiquement échappé
#main.show {
display: block;
}
.show {
display: none;
}
fichier index.html
- Obtenez le nœud principal et implémentez le style de caché à afficher
const main = document.getElementById('main')
main.classList.add("show")
Voici l'épicerie frontale , dans l'attente de votre attention Sanlian +