Preprocesamiento de CSS Less y resumen de Sass

menos está escrito en base a nodejs

sass está escrito en ruby ​​y el paquete node-sass se usa para resolver el problema de compilación

Las variables en

less se definen en mixin@less.

Uso del bloque :

lessccomando para compilar menos archivos. Método: el

atributo "mixin" solo puede basarse en las reglas de estilo existentes. Puede usar el selector de clase y el selector de id en mixin:

.a,#b{
    
    
    color: rebeccapurple;
}
.mixin-class{
    
    
    .a();
}
.mixin-id{
    
    
    #b();
}

Producción:

.a,
#b {
    
    
  color: rebeccapurple;
}
.mixin-class {
    
    
  color: rebeccapurple;
}
.mixin-id {
    
    
  color: rebeccapurple;
}

Tenga en cuenta que al llamar a mixin, los paréntesis son opcionales:

.a()  //此种写法和下面写法无区别
.a;

Mixin que no emite :

Si desea crear un mixin, pero no desea que el mixin salga en el CSS generado, puede agregar paréntesis () después de él:

.my-mixin{
    
    
    color: black;
}
.my-other-mixin(){
    
    
    background: wheat;
}
.class{
    
    
    .my-mixin;
    .my-other-mixin;
}

Producción:

.my-mixin {
    
    
  color: black;
}
//此处并没有输出 .my-other-mixin
.class {
    
    
  color: black;
  background: wheat;
}

lessNeutro extend:

Aquí hay un bloque llamado mixin:

Si se cotizan varios lugares en menos mixin:

Entonces habrá muchos códigos repetitivos en el CSS generado final:

si hay muchos mixincódigos intermedios, entonces los códigos repetitivos generados finales serán más, obviamente no queremos esto,solución:

extend

Resultado de uso :
el estilo común se extrae en un lugar y un

estilo separado allí

lessEl loopciclo

Mire un ejemplo, el principio es la recursividad: el

resultado:

menos modular

Variables en sass usan $

La mixinredacción de sass es diferente de menos:

En primer lugar, sass mixindebe mostrarse con una @mixindeclaración y el otro mixinnombre no está precedido por un punto. Por ejemplo, aquí está el
bloque @mixin, que no se puede escribir como @mixin
. El mixin en el bloque Less parece una clase y un mixin.

Cuando use sass, debe agregar@include

node-sassCómo utilizar la compilación de la línea de comandos

sassEn, use extender así:

sassEl loopciclo

sass escribe un diseño de cuadrícula de forma recursiva. Tenga en cuenta que sass se usa para hacer referencia a variables #{$n}, y less se usa para hacer referencia a variables.@{n}

¡pero! ! ! ! ! ! ! ! ! ! ! ! ! ! !

De hecho, sass no tiene por qué ser tan problemático, ¡porque sass admite bucles!

descarado modular

para resumir:

Marco de preprocesador CSS