Notas: Uso simple de Less (preprocesador css)

Less incluye un conjunto de gramáticas personalizadas y un analizador. Los usuarios definen sus propias reglas de estilo basadas en estas gramáticas. Estas reglas serán eventualmente compiladas y generadas por el analizador para generar los archivos CSS correspondientes.

• variable

formato

@变量名：值

不能包特殊字符，不能以数字开头，大小写敏感

• Anidado

formato

父级元素{
    
    
	css样式；
	子集元素{
    
    
		css样式
	}
}

1. Intersección | Pseudoclase | Selector de pseudoelemento

Si no hay un ampersand antes del selector interno, se analizará como hijo del padre.
Si hay un ampersand, se analizará como el elemento padre en sí mismo o como la pseudoclase del elemento padre.

父级元素{
    
    
	css代码；
	&：hover{
    
    
		css代码
	}
}

• Cálculo

Cualquier número, color o variable en Less puede participar en el cálculo

1. Los espacios deben agregarse a los lados izquierdo y derecho del operador
2. Dos números participan en el cálculo, si solo uno tiene una unidad, el resultado final se basará en esta unidad
3. Si ambos números tienen unidades y no son iguales, el resultado final se basa en la primera unidad

距离运算

元素名称{
    
    
	width：200px + 50；
	height：82rem / @变量名
}

颜色运算

#666 - #444 结果是 #222

• mezclar

元素名称a{
    
    
	css代码
}

元素名称b{
    
    
	元素名称a（）
}

元素名称b 里面也有元素名称a 的属性