Menos preprocesamiento: un enfoque híbrido

Directorio de artículos de la serie

---

---

Un enfoque mixto

1. Método sin parámetros

El método es una colección de declaraciones, y el nombre se escribe directamente cuando se usa

Nota: es.card equivalente a . .card()Para evitar confusiones de código, se recomienda escribir el siguiente formulario

archivo index.less

.card() {
    
    
    background: yellow;
    box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25);
}
#wrap {
    
    
    .card();
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#wrap {
    
    
  background: yellow;
  box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25);
}

2. Método de parámetro predeterminado

Less puede usar parámetros predeterminados, si no se pasan parámetros, se usarán los parámetros predeterminados

@arguments es similar a los argumentos en JS y se refiere a todos los parámetros

Los parámetros pasados ​​deben tener unidades.

archivo index.less

.border(@a:10px; @b:20px; @c:30px; @color: skyblue) {
    
    
    border: solid 1px @color;
    // @arguments 指代传进来的全部参数
    box-shadow: @arguments;
}
#wrap {
    
    
    .border();
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#wrap {
    
    
  border: solid 1px skyblue;
  box-shadow: 10px 20px 30px skyblue;
}

3. Modo de coincidencia de métodos

Similar al polimorfismo en la orientación a objetos

Ejemplo:

• El primer parámetro a la izquierda encontrará el método con el grado de coincidencia alto . Si el grado de coincidencia es el mismo, se seleccionarán todos y habrá un reemplazo de anulación de estilo.
• Coincidirá si el argumento coincidente es una variable, como @_

archivo index.less

.triangle(right, @width: 20px, @color: #ccc) {
    
    
    border-color: transparent @color transparent transparent;
}
.triangle(left, @width: 20px, @color: #ccc) {
    
    
    border-color: transparent transparent transparent @color;
}

.triangle(@_, @width: 20px, @color: #ccc) {
    
    
    border-style: solid;
    border: @width;
}

// 进行匹配，命中第二个，然后更新一些样式
#main {
    
    
    .triangle(left, 50px, #666)
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#main {
    
    
  border-color: transparent transparent transparent #666;
  border-style: solid;
  border: 50px;
}

4. Espacio de nombres del método

Hacer el método más estandarizado.

ilustrar:

• En CSS > selector, se selecciona el elemento hijo, es decir, el elemento que debe estar directamente relacionado con el elemento padre
• Al introducir espacios de nombres, como usar el selector >, los elementos principales no se pueden poner entre paréntesis
• Un método de espacio de nombres no debe usarse solo, el espacio de nombres debe introducirse antes de que se puedan usar los métodos que contiene.
• Submétodo, puede usar el método pasado desde la capa anterior

archivo index.less

// 方法的命名空间
#card() {
    
    
    background: pink;
    .d(@w:300px) {
    
    
        width: @w;
        #a(@h: 300px) {
    
    
            height: @h;
        }
    }
}

// 父级方法 使用了 >， 不需要括号
#wrap {
    
    
    #card > .d > #a(100px);
}
#main {
    
    
    #card .d();
}
#top {
    
    
    #card;
    .d(100px;);
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#wrap {
    
    
  height: 100px;
}
#main {
    
    
  width: 300px;
}
#top {
    
    
  background: pink;
  width: 100px;
}

5. Cribado condicional de métodos

No hay if else en Less, pero tiene when

Mira si cumples con las restricciones

archivo index.less

#card {
    
    
    // when &&
    .border(@width, @color, @style) when (@width > 100px) and (@color=#ccc) {
    
    
        border: @style @color @width;
    }
    // when not
    .background(@color) when not (@color >= #111) {
    
    
        background: @color;
    }
    // , 逗号分隔符方法 ||
    .font(@size: 20px) when (@size > 100px), (@size < 50px) {
    
    
        font-size: @size;
    }
}

#main {
    
    
    #card > .border(500px, #ccc, solid);
    #card > .background(#222);
    #card > .font(10px);
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#main {
    
    
  border: solid #ccc 500px;
  background: #222;
  font-size: 10px;
}

6. Un número indeterminado de parámetros

El método acepta un número indeterminado de parámetros, puede utilizar...

archivo index.less

.boxShadow(...) {
    
    
    box-shadow: @arguments;
}
.textShadow(@a, ...) {
    
    
    text-shadow: @arguments;
}
#main {
    
    
    .boxShadow(1px, 2px, 5px, #520);
    .textShadow(1px, 2px, 5px, #1314);
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#main {
    
    
  box-shadow: 1px 2px 5px #520;
  text-shadow: 1px 2px 5px #1314;
}

7. Usa !importante

archivo index.less

.border() {
    
    
    border: 1px solid #520;
    margin: 20px;
}
#main {
    
    
    .border() !important;
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#main {
    
    
  border: 1px solid #520 !important;
  margin: 20px !important;
}

8. Método de circulación

Less no proporciona un bucle for, pero se puede implementar de forma recursiva

archivo index.less

.generate-columns(4);
.generate-columns(@n, @i:1) when (@i <= @n) {
    
    
    .columns-@{
    
    i} {
    
    
        width: (@i*100%/@n);
    }
    .generate-columns(@n, (@i+1));
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

.columns-1 {
    
    
  width: 25%;
}
.columns-2 {
    
    
  width: 50%;
}
.columns-3 {
    
    
  width: 75%;
}
.columns-4 {
    
    
  width: 100%;
}

9. Método de empalme de atributos

+_significa espacios
+significa comas

archivo index.less

// + 表示 ,
.boxShadow() {
    
    
    box-shadow+: inset 0 0 10px #ccc;
}
#main {
    
    
    .boxShadow();
    box-shadow+: 0 0 20px #666;
}

// +_ 表示 空格
.Animation() {
    
    
    transform+_: scale(2);
}
.main {
    
    
    .Animation();
    transform+_: rotate(15deg);
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

#main {
    
    
  box-shadow: inset 0 0 10px #ccc, 0 0 20px #666;
}
.main {
    
    
  transform: scale(2) rotate(15deg);
}

10. Habilidades prácticas

Calcular el promedio

archivo index.less

.average(@x, @y) {
    
    
    @average: ((@x + @y) / 2)
}
div {
    
    
    .average(16px, 50px);
    padding: @average;
}

archivo index.css

• El contenido del archivo css con escape automático es el siguiente

div {
    
    
  padding: 33px;
}

Aquí está la tienda de comestibles frontal , esperando su atención Sanlian +