Directorio de artículos de la serie
Directorio de artículos
1. Introducción a Menos
Less es un lenguaje de preprocesamiento CSS Expande el lenguaje CSS y agrega funciones como variables , mixins y funciones, lo que hace que CSS sea más fácil de mantener , temas y extensiones .
Less puede ejecutarse en Node o en el navegador.
Menos nos permite hacer más con menos código .
2. Instalar Fácil MENOS
Easy LESS: se utiliza para generar automáticamente archivos CSS o WXSS después de escribir archivos Less
3. El primer pequeño ejemplo
archivo index.html
- Nota: importe el archivo css en
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="container">
Hello Less!
</div>
</body>
</html>
archivo index.less
- @xxx: definir estilos comunes
- Al usarlo, puede directamente @xxx
@color: skyblue;
@bgColor: red;
@width: 100px;
@height: 100px;
#container {
color: @color;
background-color: @bgColor;
width: @width;
height: @height;
}
archivo index.css
- El archivo css con escape automático es el siguiente
#container {
color: skyblue;
background-color: red;
width: 100px;
height: 100px;
}
Aquí está la tienda de comestibles frontal , esperando su atención Sanlian +