Directorio de artículos
Menos lenguaje de preprocesamiento
Lesses unLenguaje de estilo dinámico; Para mejorar la flexibilidad y la eficiencia de la aplicación CSS, LESS dota a CSS de funciones de lenguaje dinámico, como variables, herencia, operaciones y funciones. LESS no solo puede 客户端 ejecutarse (admite IE 6+, Webkit, Firefox), sino que también puede ejecutarse en el lado del servidor con la ayuda de Node.js.
Deficiencias de CSS
Elegimos Less porque compensa muchas de las deficiencias de CSS. Como aprendices front-end, todos necesitamos aprender algo de CSS. Como uno de los tres pilares del desarrollo front-end, siempre lidera la tendencia de desarrollo de la Web. Como lenguaje de marcado, CSS puede dar a los principiantes la primera impresión de que es fácil de entender, ilógico y no como la programación. Cuando se actualiza la gramática, cada vez que se propone un nuevo atributo, la compatibilidad del navegador se convierte inmediatamente en un escollo.Se puede decir que las deficiencias de CSS no se pueden ignorar.
El nacimiento de los problemas suele ir acompañado del auge de la tecnología. En los últimos años de desarrollo web, para hacer que el CSS sea más lógico y menos serio, han surgido algunos lenguajes de preprocesamiento mágicos. Se convierten por CSS completo en un lenguaje de marcado que puede usar varias funciones como 变量, 循环, 继承, 自定义方法etc., y la lógica se mejora enormemente.
El nacimiento de los lenguajes de preprocesamiento
Entre ellos, hay tres lenguajes de uso común: Sass, Less, Stylus.
- Sass nació en 2007, escrito en Ruby, y sus funciones de sintaxis son muy completas, se puede decir que convierte completamente a CSS en un lenguaje de programación. Además, es muy popular en el país y en el extranjero, y su equipo de proyecto es muy fuerte, es un lenguaje de preprocesamiento muy bueno.
- Stylus nació en 2010, de la comunidad Node.js, y su función gramatical es comparable a la de Sass, es un lenguaje muy singular e innovador.
- Less nació en 2009, un proyecto de código abierto creado bajo la influencia de Sass. Expande el lenguaje CSS y agrega funciones como variables, mixins y funciones, lo que hace que CSS sea más fácil de mantener, crear temas y expandir.
Menos instalación
Usando Less en un entorno Node.js:
npm install -g less
Usando Less en un entorno de navegador:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
Menos notas
Hay dos tipos de anotaciones por menos:
//这种注释，在编译后不会出现在CSS文件上
/*这种注释，编译后会出现在CSS文件上*/
Menos variable
A menudo vemos el mismo valor repetido muchas veces en CSS, lo que dificulta el mantenimiento del código. Idealmente, debería verse así:
const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);
Siempre que modifiquemos la variable bgColor, el color de fondo de toda la página cambiará en consecuencia. Las variables en Less son muy poderosas y pueden cambiarlo todo,Cabe mencionar que sus variables son constantes, por lo que solo se pueden definir una vez y no se pueden reutilizar
variable de valor
/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
color: @color;
background: @bgColor;
width: @width;
}
/* 生成后的 CSS */
#wrap {
color: #999;
background: skyblue;
width: 50%;
}
@Las variables se definen comenzando con y se escriben directamente cuando se usan @名称. En el trabajo normal, podemos encapsular las variables de uso común en un archivo, lo que favorece la organización y el mantenimiento del código.
Por ejemplo:
@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;
selector de variables
Haz que el selector sea dinámico:
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{
mySelector}{
//变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{
Wrap}{
color:#ccc;
}
#@{
Wrap}{
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
variable de atributo
Puede reducir la cantidad de escritura de código:
/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{
borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
#wrap{
border-style:solid;
}
URL variable
Cuando cambie la estructura del proyecto, simplemente modifique sus variables:
/* Less */
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
body {
background: url("../img/dog.png");
}
Resumamos:
Interpolación de variables:
es decir, cuando las variables se usan en nombres de selectores, nombres de atributos, direcciones URL y declaraciones @import, deben estar encerradas entre llaves.
declarar variables
Un poco como el siguiente enfoque híbrido:
- estructura:
@name: { 属性: 值 ;}; - utilizar:
@name();
Por ejemplo:
/* Less */
@background: {
background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
/* 生成的 CSS */
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
operación variable
Cabe mencionar que las operaciones variables de Less son muy poderosas.
- Sumar y restar según la unidad del primer dato
- Al multiplicar y dividir, preste atención a la unidad debe estar unificada
- Al conectar operaciones, preste atención a agregar espacios para evitar errores que no se pueden encontrar para las variables
/* Less */
@width:300px;
@color:#222;
#wrap{
width:@width - 20;
height:@width - 20*5;
margin:(@width - 20)*5;
color:@color*2;
background-color:@color + #111;
}
/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}
Alcance variable
Una frase de entendimiento es: el principio de proximidad.
/* Less */
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
/* 生成的 CSS */
#wrap {
width: 9%;
}
usar variables para definir variables
/* Less */
@fnord: "I am fnord.";
@var: "fnord";
#wrap::after{
content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
content: "I am fnord.";
}
Menos anidamiento
La magia de &
& : El nombre del selector de nivel superior representado
Este ejemplo es el encabezado:
/* Less */
#header{
&::after{
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{
//理解方式：直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{
//嵌套了
font-weight:bold;
}
#header_content{
//没有嵌套！
margin:20px;
}
consulta de medios
En trabajos anteriores, usamos consultas de medios para escribir un elemento por separado:
#wrap{
width:500px;
}
@media screen and (max-width:768px){
#wrap{
width:100px;
}
}
Less proporciona una manera muy conveniente:
/* Less */
#main{
//something...
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
El único inconveniente es que cada elemento compilará su propia declaración @media y no se fusionará.
Habilidades prácticas
Puede usar Less para definir sus propios estilos privados en elementos.
/* Less */
#main{
// something..
&.show{
display:block;
}
}
.show{
display:none;
}
const main = document.getElementById("main");
main.classList.add("show");
resultado:
#main.show{
display:block;
}
.show{
display:none; //会被覆盖。
}
enfoque mixto
Mixin (Mixin) es una forma de incluir (o mezclar) un conjunto de atributos de un conjunto de reglas a otro, lo que puede entenderse como copiar y pegar.
Sin método de parámetro
Un método es como una colección de declaraciones, solo escriba el nombre cuando lo use:
/* Less */
.card {
// 等价于 .card()
background: #f6f6f6;
-webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
.card;//等价于.card();
}
/* 生成的 CSS */
#wrap{
background: #f6f6f6;
-webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
donde .cardy .card()son equivalentes. Se sugiere que, para evitar confusiones en el código, se escriba como:
.card(){
//something...
}
#wrap{
.card();
}
Puntos principales:
.Ambos y#se pueden usar como prefijos de método.- Si escribir después del método depende de
()los hábitos personales.
método de parámetro predeterminado
- Less puede usar parámetros predeterminados, si no se pasan parámetros, se usarán los parámetros predeterminados.
@argumentsAl igual que en JSargumentsse refiere a todos los parámetros.- El parámetro pasado debe tener una unidad.
/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
border:solid 1px @color;
box-shadow: @arguments;//指代的是 全部参数
}
#main{
.border(0px,5px,30px,red);//必须带着单位
}
#wrap{
.border(0px);
}
#content{
.border;//等价于 .border()
}
/* 生成的 CSS */
#main{
border:solid 1px red;
box-shadow:0px,5px,30px,red;
}
#wrap{
border:solid 1px #000;
box-shadow: 0px 50px 30px #000;
}
#content{
border:solid 1px #000;
box-shadow: 10px 50px 30px #000;
}
patrón de coincidencia de métodos
Muy similar al polimorfismo en orientación a objetos:
/* Less */
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
border-style: solid;
border-width: @width;
}
#main{
.triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
border-color:transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}
puntos principales:
- El primer
leftparámetro encontrará el método con el grado de coincidencia más alto. Si el grado de coincidencia es el mismo, se seleccionarán todos y habrá un reemplazo de anulación de estilo. - Coincidirá si el argumento coincidente es una variable, por ejemplo,
@_.
espacio de nombres del método
Hacer el método más estandarizado.
/* Less */
#card(){
background: #723232;
.d(@w:300px){
width: @w;
#a(@h:300px){
height: @h;//可以使用上一层传进来的方法
}
}
}
#wrap{
#card > .d > #a(100px); // 父元素不能加 括号
}
#main{
#card .d();
}
#con{
//不得单独使用命名空间的方法
//.d() 如果前面没有引入命名空间 #card ，将会报错
#card; // 等价于 #card();
.d(20px); //必须先引入 #card
}
/* 生成的 CSS */
#wrap{
height:100px;
}
#main{
width:300px;
}
#con{
width:20px;
}
puntos principales:
- En CSS, el
>selector selecciona el elemento secundario, es decir, el elemento que debe tener una fuente de sangre directa con el elemento principal. - Al introducir un espacio de comando, como usar un
>selector , el elemento principal no se puede poner entre paréntesis. - Un método que no puede usar un espacio de nombres solo debe introducir primero un espacio de nombres antes de usar sus métodos.
- El submétodo puede usar el método pasado desde la capa anterior
Filtro condicional del método
Menos no tiene si más, pero tiene cuando:
/* Less */
#card{
// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not 运算符，相当于 非运算 !，条件为 不符合才会执行
.background(@color) when not (@color>=#222){
background:@color;
}
// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}
/* 生成后的 CSS */
#main{
border:solid #999 200px;
background:#111;
font-size:40px;
}
puntos principales
- Las operaciones de comparación son: > >= = =< <.
- = significa igual a
- Los valores distintos a la palabra clave true se consideran falsos:
número variable de parámetros
Si desea que su método acepte un número variable de argumentos, puede usar ..., como ES6, el operador de propagación.
/* Less */
.boxShadow(...){
box-shadow: @arguments;
}
.textShadow(@a,...){
text-shadow: @arguments;
}
#main{
.boxShadow(1px,4px,30px,red);
.textShadow(1px,4px,30px,red);
}
/* 生成后的 CSS */
#main{
box-shadow: 1px 4px 30px red;
text-shadow: 1px 4px 30px red;
}
El método utiliza el importante!
El método de uso es muy simple, solo agregue palabras clave después del nombre del método.
/* Less */
.border{
border: solid 1px red;
margin: 50px;
}
#main{
.border() !important;
}
/* 生成后的 CSS */
#main {
border: solid 1px red !important;
margin: 50px !important;
}
método de bucle
Less no proporciona una función de bucle for, pero no es difícil para los programadores inteligentes usar la recursividad para lograrlo. La siguiente es una demostración en el sitio web oficial, que simula el sistema de cuadrícula generado.
/* Less */
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{
i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
Método de empalme de atributos
+_representa un espacio;+Representa una coma.
coma:
/* Less */
.boxShadow() {
box-shadow+: inset 0 0 10px #555;
}
.main {
.boxShadow();
box-shadow+: 0 0 20px black;
}
/* 生成后的 CSS */
.main {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
espacio:
/* Less */
.Animation() {
transform+_: scale(2);
}
.main {
.Animation();
transform+_: rotate(15deg);
}
/* 生成的 CSS */
.main {
transform: scale(2) rotate(15deg);
}
Habilidades prácticas
/* Less */
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // 调用 方法
padding: @average; // 使用返回值
}
/* 生成的 CSS */
div {
padding: 33px;
}
Se puede decir que Less es un lenguaje de programación elegante.