【Menos】 Preprocesador CSS

Marque menos en vscode, aparecerá el siguiente complemento, haga clic en instalar

Verificando la información, sabrá:

Tanto Sass como Less pertenecen al preprocesador Css. El preprocesador Css define un nuevo lenguaje. La idea básica es usar un lenguaje de programación especial para agregar algunas características de programación a Css. Use Css como el objetivo para generar archivos, y luego Los desarrolladores usan este lenguaje para la codificación Css (usando un lenguaje de programación especial para diseñar páginas web, y luego lo convierten en un archivo Css normal a través de un compilador para que el proyecto lo use).

Uso básico

Tenemos esas dos carpetas.

Podemos escribir nuestro código CSS bajo el archivo .less, y luego usar alguna sintaxis .less, como reglas de anidamiento, espacios de nombres, etc., para facilitar nuestra organización y mantenimiento,
y después de escribir .less, Nuestro compilador convertirá nuestro archivo CSS a un archivo CSS normal para que el proyecto lo utilice

Por ejemplo

Nuestro archivo menos se puede escribir así

.header {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border-bottom: 1px solid #e1e1e1;

    .header_con {
        width: 1200px;
        height: 100px;
        margin: 0 auto;
        line-height: 100px;

        .header_img {
            margin-top: 32px;
            float: left;
            cursor: pointer;
            width: 153px;
        }

css se convertirá en archivos Css normales por el compilador

.header {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  border-bottom: 1px solid #e1e1e1;
}
.header .header_con {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
}
.header .header_con .header_img {
  margin-top: 32px;
  float: left;
  cursor: pointer;
  width: 153px;
}

De esta manera, no tenemos que escribir siempre el nivel superior del elemento, lo cual es conveniente para ahorrar tiempo y la estructura del código también es clara.
Como otro ejemplo, podemos definir una variable siempre que se haga referencia a ella donde la necesitemos.

Nuestro archivo menos está escrito de la siguiente manera:

@base:red;
.app{
    color:@base
}

Luego, el css correspondiente se compilará automáticamente como:

.app {
  color: red;
}

Para obtener más puntos de conocimiento, consulte la siguiente información:

http://lesscss.cn/

https://www.jianshu.com/p/6489e28e548e