Directorio de artículos
heredar
Uso de la palabra clave extender
extend es una pseudoclase de Less. Hereda todos los estilos de declaraciones coincidentes.
/* Less */
.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
/* 生成后的 CSS */
.animation,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform:scale(0);
}
todas las búsquedas y reemplazos globales
Todas las declaraciones coincidentes con el selector.
/* Less */
#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main all) {
}
/* 生成的 CSS */
#main,#wrap{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}
Reducir la duplicación de código
A primera vista, la mayor diferencia entre extend y method es que extend comparte la misma declaración con el mismo selector, mientras que method usa su propia declaración, lo que sin duda aumenta la duplicación de código.
El ejemplo del método se compara con la extensión anterior:
/* Less */
.Method{
width: 200px;
&:after {
content:"Less is good!";
}
}
#main{
.Method;
}
#wrap{
.Method;
}
/* 生成的 CSS */
#main{
width: 200px;
&:after{
content:"Less is good!";
}
}
#wrap{
width: 200px;
&:after{
content:"Less is good!";
}
}
Puntos clave para la herencia
- Se permiten espacios entre el selector y la extensión: pre:hover :extend(div pre).
- Puede haber múltiples extensiones: pre:hover:extend(div pre):extend(.bucket tr) - Tenga en cuenta que esto es lo mismo que pre:hover:extend(divpre, .bucket tr).
- Esto no está permitido, la extensión debe estar al final: pre:hover:extend(div pre).nth-child(odd).
- Si un conjunto de reglas contiene varios selectores, todos los selectores pueden usar la palabra clave extend.
importar
importación de archivos
El sufijo se puede omitir al importar menos archivos.
import "main";
//等价于
import "main.less";
La posición de @import se puede colocar libremente
#main{
font-size:15px;
}
@import "style";
referencia
Las funciones más potentes de Less usan el archivo Less importado, pero no lo compilan.
/* Less */
@import (reference) "bootstrap.less";
una vez
Comportamiento predeterminado para declaraciones @import. Esto significa que el mismo archivo solo se importará una vez y no se resolverá el código duplicado para los archivos importados posteriores.
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
múltiple
El uso de @import (múltiple) permite importar varios archivos con el mismo nombre.
/* Less */
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* 生成后的 CSS */
.a {
color: green;
}
.a {
color: green;
}
expresión condicional
mezclado con condiciones
- Operadores de comparación: >, >=, =, =<, <
- Formato:
when() { }
// lightness() 是检测亮度的函数，用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
background-color: white;
}
.mixin(@a) {
color: @a;
}
.class1 {
.mixin(#ddd);
}
.class2 {
.mixin(#555);
}
//编译输出
.class1 {
background-color: black;
color: #dddddd;
}
.class2 {
background-color: white;
color: #555555;
}
función de detección de tipo
- tipo de valor detectado
- escolor
- es número
- escadena
- espalabra clave
- isurl
.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
color: @a;
font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
font-size: @a;
color: @b;
}
función de detección de unidades
- Comprueba si un valor que no sea un número está en una unidad específica
- espixel
- esporcentaje
- nombre
- isuni
mixin(@a) when(ispixel(@a)) {
width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
width: @a;
}
.class1 {
.mixin(960px);
}
.class2 {
.mixin(95%);
}
//编译输出
.class1 {
width: 960px;
}
.class2 {
width: 95%;
}
función
biblioteca de funciones
- Less encapsula muchas bibliotecas de funciones, como definición de color, operación de color, mezcla de color, procesamiento de cadenas, etc.
- Por ejemplo, color(): se utiliza para analizar el color y convertir la cadena que representa el color en un valor de color.
body {
color: color("#f60");
background: color("red");
}
//编译输出
body {
color: #ff6600;
background: #ff0000;
}
- Por ejemplo convert(): convierte un número de un tipo (unidad) a otro
- Unidades de longitud: m, cm, mm, in, pt, px, pc
- Unidad de tiempo: s, ms
- Unidad de ángulo: rad (radian), deg (grado), grad (gradiente), tum (círculo)
body {
width: convert(20cm, px);
}
//编译输出
body {
width: 755.90551181px;
}
Para más funciones, vaya al sitio web oficial para ver! https://less.bootcss.com/