Menos preprocesamiento: variables y anidamiento

Directorio de artículos de la serie

---

---

1. Menos variable

1. Selector de variables

Haz que el selector sea dinámico

archivo index.html

• selectores de id y clase

  <div id="wrap">
      Hello Less!
  </div>
  <div class="wrap">
      Hello World!
  </div>

archivo index.less

• El primero es determinar el tipo de selector (id selector)
• El segundo es indeterminado El tipo de selector (selector de id/clase)

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;

@{
    
    mySelector} {
    
    
    color: #ccc;
    width: 50%;
}

.@{
    
    wrap} {
    
    
    color: skyblue;
    width: 50%;
}

#@{
    
    wrap} {
    
    
    color: aqua;
    width: 50%;
}

archivo index.css

• archivo css con escape automático

#wrap {
    
    
  color: #ccc;
  width: 50%;
}
.wrap {
    
    
  color: skyblue;
  width: 50%;
}
#wrap {
    
    
  color: aqua;
  width: 50%;
}

2. Variables de atributo

Reducir la escritura de código

archivo index.html

Nota: Esta es una estructura HTML pública que se usa en las siguientes pruebas.

  <div id="wrap">
      Hello Less!
  </div>

archivo index.less

• variable de propiedad, establecer propiedad

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;

// 属性变量
@borderStyle: border-style;
@solid: solid;

@{
    
    mySelector} {
    
    
    @{
    
    borderStyle}: @solid;
}

archivo index.css

• archivo css con escape automático

#wrap {
    
    
  border-style: solid;
}

3. URL variable

Cuando cambie la estructura del proyecto, modifique sus variables para

archivo index.less

@images: "../../img";

body {
    
    
    background: url("@{images}/xxx.png");
}

archivo index.css

• archivo css con escape automático

body {
    
    
  background: url("../../img/xxx.png");
}

4. Declarar variables

Estructura: @nombre: {propiedad: valor}

Usa el nombre()

Ejemplo: Exceso de contenido, ...indicado

archivo index.less

@Rules: {
    
    
       width: 60px;
       height: 30px;
       border: 1px solid #ccc;
       /*第一步： 溢出隐藏 */
       overflow: hidden;
       /* 第二步：让文本不会换行， 在同一行继续 */
       white-space: nowrap;
       /* 第三步：用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;
}
#wrap {
    
    
    @Rules();
}

archivo index.css

• archivo css con escape automático

#wrap {
    
    
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  /*第一步： 溢出隐藏 */
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
}

5. Operación variable

• Al sumar o restar, la unidad del primer dato se usa como base
• Al multiplicar y dividir, preste atención a la unidad debe estar unificada
• Tenga en cuenta el espacio

archivo 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;
}

archivo index.css

• archivo css con escape automático

#wrap {
    
    
  width: 280px;
  height: 260px;
  margin: 200px;
  color: #cccccc;
  background-color: #dddddd;
}

6. Alcance de las variables

El principio de proximidad

archivo index.less

@var:@a;
@a:100%;
#wrap {
    
    
    width: @var;
    @a:9%;
    border: 1px solid #ccc;
}

archivo index.css

• archivo css con escape automático

#wrap {
    
    
  width: 9%;
  border: 1px solid #ccc;
}

7. Usa variables para definir variables

archivo index.less

@fond:@var;
@var:'fond';
#wrap::after {
    
    
    content: @var;
}

archivo index.css

• archivo css con escape automático

#wrap::after {
    
    
  content: 'fond';
}

2. Menos anidamiento

1. Uso de &

&: el nombre del selector anterior

archivo index.html

• Múltiples niveles de anidamiento

<div class="center">
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

archivo index.less

• &: el nombre del selector anterior
• Escribible o no

.center {
    
    
    width: 100px;
    height: 100px;
    background: red;
    & #list {
    
    
        width: 50px;
        height: 50px;
        background: skyblue;
        li {
    
    
            width: 20px;
            height: 20px;
            background: #ccc; 
        }
    }
}

archivo index.css

• archivo css con escape automático

.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. Consultas de los medios

archivo index.less

#main {
    
    
    @media screen {
    
    
        @media (max-width: 768px) {
    
    
            width: 100px;
        }
    }
    @media tv {
    
    
        width: 2000px;
    }
}

archivo index.css

• archivo css con escape automático

@media screen and (max-width: 768px) {
    
    
  #main {
    
    
    width: 100px;
  }
}
@media tv {
    
    
  #main {
    
    
    width: 2000px;
  }
}

3. Consejos: agregue estilos privados

Ejemplo: implementando el cambio de estilo de oculto a mostrado

archivo index.less

#main {
    
    
    &.show {
    
    
        display: block;
    }
}

.show {
    
    
    display: none;
}

archivo index.css

• archivo css con escape automático

#main.show {
    
    
  display: block;
}
.show {
    
    
  display: none;
}

archivo index.html

• Obtenga el nodo principal e implemente el estilo de oculto a mostrado

const main = document.getElementById('main')
main.classList.add("show")

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