Menos
Menos es más, que CSS- menos es más, que CSS
Lo que es menos?
- MENOS apoya la creación de un producto de limpieza, entre navegadores CSS usar más rápido y más fácil.
- MENOS JavaScript está diseñado y creado en en vivo, compila más rápido que otros preprocesador CSS.
- MENOS mantener su código de forma modular, lo cual es muy importante, por lo que es fácil de leer y fácil de cambiar.
- Se puede lograr mediante el uso de la variable MENOS más rápido mantenimiento.
Menos de desarrollo
menos diseñada por Alexis Sellier en 2009. MENOS es una fuente abierta. La primera versión del MENOS está escrito en Ruby, en versiones posteriores, es JavaScript en su lugar.
característica menos - código más claro y de fácil lectura se puede escribir de una manera organizada.
- Podemos definir un estilo, que puede ser reutilizado en todo el código.
- Menos se basa en JavaScript, es un superconjunto de CSS.
- Menos es una herramienta ágil, problemas de redundancia de código se puede descartar.
menos ventajas - MENOS CSS puede generar fácilmente trabajo en el navegador.
- Menos puede utilizar el limpiador de escritura anidada, código bien organizado.
- El mantenimiento se puede lograr mediante el uso de una variable más rápido.
- Menos puede hacer referencia a ellos, centrándose en reglas para facilitar la reutilización de toda la clase.
- MENOS proporciona el uso de la operación, de manera que el codificado más rápido y ahorrar tiempo.
Menos deficiencias - Si usted está aprendiendo un nuevo tratamiento previo CSS se necesita tiempo.
- Debido a la estrecha conexión entre los módulos, hay que tener más esfuerzos para la reutilización y / o pruebas de los módulos dependientes.
- En comparación con la antigua pre-procesador (por ejemplo Sass), menos que tienen menos marco, Sass por el marco de brújula, la gravedad y la composición Susy.
Menos como jQuery (una biblioteca de CSS)
MENOS CSS es un estilo dinámico del lenguaje, pre-lengua pertenece a un CSS, que es similar a la sintaxis de CSS, CSS se da a las características del lenguaje dinámico, como las variables, la herencia, operaciones, funciones, etc., más fácil de escribir y mantener CSS
herramientas de compilación - compilación koala
- La gente de desarrollo de herramientas compilador SASS / MENOS
- Descargar: http://koala-app.com/index-zh.html
- biblioteca nodejs
- Navegador usar
koala uso básico
Menos en los comentarios
MENOS comentario:
/ * contenido está siendo compilado en .CSS reservado archivo * /
// contenido no se compilan, no aparece en el archivo .CSS
variable
// las variables de declarar, comenzando con @, como por ejemplo: @ nombre de la variable: valor;
@w: 500px;
@h: 300px;
.box {
width: @w;
height: @h;
}
mezcla
Sin argumentos (o sin tiempo de referencia () paréntesis):
declaración, .bd_radius {}; referencias, .box {} .bd_radius
parámetros (se debe hacer referencia banda cuando () paréntesis):
① declaración, .bd_radius (@radius) { frontera de radio: @radius;}
referencias, .box {.bd_radius (5px); } - los parámetros tienen
valores por defecto con
.bd_radius (@radius: 10px) {border -radius: @radius;}
el modo de ajuste
- JS equivalente de si, pero no exclusivamente,
- Tras el partido con el fin de satisfacer la condición
Es decir, baja versión compatible (border-style: discontinua) css Triángulo
.triangle(top, @w:5px, @c:#ccc){...}
.triangle(bottom, @w:5px, @c:#ccc){...}
.triangle(left, @w:5px, @c:#ccc){...}
.triangle(right, @w:5px, @c:#ccc) {
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
@ _ Variable, no importa lo que se pasa el primer parámetro, este método coincidirá
.triangle(@_, @w:5px, @c:#ccc) {
width: 0,
height: 0,
overflow: hidden;
}
citar:
.sanjiao { .triangle(right, 100px); }
CSS compilado:
.sanjiao {
width: 0,
height: 0,
overflow: hidden;
border-width: 100px;
border-color: transparent transparent transparent #ccc;
border-style: dashed dashed dashed solid;
}
operación
operación aritmética puede llevar a cabo, siempre que no puede haber una banda de píxel, se requiere espacio en ambos lados de la símbolo
Menos de la operativa
@test_01:300px;
.box_02{
width:@test_01 + 20;
height: (@test_01 - 200) * 5;
background:#ccc - 10;
}
regla anidada
Menos de anidación: Otra modificación de los selectores CSS, para completar los selectores CSS nivel de conversión por anidado dentro de cada uno de los selectores CSS. En donde R representa en el selector de capa adaptada escenario, pseudo-clases.
Más anidado, más el número de coincidencias, carga de impacto
y representante de una capa seleccionada en
.list {
li { ... }
a {
color: blue;
&:hover { color: red; }
}
span { ... }
}
@arguments variables
Después de todas las variables, por definición, en nombre de una pluralidad de parámetros para una escena, el mismo estilo CSS atributos correspondientes a una pluralidad de valores de atributos, por ejemplo frontera: sólido 1px rosa; Si el valor de la propiedad se pasa como parámetro, se puede utilizar en lugar de los correspondientes @arguments parámetros. ¿Cómo citar? Como de costumbre, para pasar cuando el correspondiente paso de parámetros de referencia, el intermedio se puede utilizar "" o ';' aparte, si menos masa, a juego de prensa orden.
@arguments en nombre de todos los parámetros pasados
.border (@w:1px, @s: solid, @c: red) {
border: @arguments;
}
citar:
.test_border {
.border(20px);
}
CSS compilado:
.test_border {
border: 20px solid red;
}
## compilación evitar ,! Importante y resumir
la compilación 1 evite
- A veces tenemos que exportar algo de gramática o el uso de la sintaxis CSS propietaria MENOS Algunos no saben incorrecta.
- A la salida de este valor podemos añadir un ~ delante de la cadena
, por ejemplo: anchura: ~ 'Calc (100% - 35)'
~ '...'
~ "..."
2 palabras claves importantes que traerán toda la mixta! estilo, añadir! Importante
! estilos importantes prioridad más alta.
más información
- Menos página web china
- http://lesscss.net
- portal legado chino: http://old.lesscss.net/article/document.html
