¡Hola a los lectores del blog de Amasty!
Hoy vamos a hablar sobre el preprocesador LESS y su uso para las tiendas Magento 2.
Como desarrollador frontend experimentado, debe saber cómo utilizar LESS y qué beneficios (en comparación con CSS). En esta publicación, intentaremos describir cómo la estructura de los archivos CSS, la sintaxis y las consultas de medios se comparan con las de LESS.
Entonces, averigüemos qué posibilidades nos da el preprocesador.
Lea cómo LESS y CSS se involucran en nuestra extensión Magento 2 Blog .
Resumen del artículo [ ocultar ]
- LESS vs. CSS: los pros y los contras
- Estructura de archivos
- Estructura de archivos CSS
- Estructura de archivos LESS
- LESS y sintaxis CSS
- Consultas de medios de Magento
- mezclando lib-css()
- MENOS posibilidades
- Estructura de archivos
- ¿Cómo trabajar con LESS usando Grunt?
- Compilar LESS en modo de producción
- Compilar LESS en modo desarrollador y predeterminado
- última palabra
LESS vs. CSS: los pros y los contras
Una de las ventajas innegables de LESS es que simplifica la gestión de un gran volumen de estilos CSS y flexibiliza CSS . Además, este lenguaje de hojas de estilo agrega múltiples características dinámicas a CSS; introduce variables, anidamiento, operadores, funciones y mixins.
Nuestro desafío de hoy es descubrir (1) cómo distinguir entre LESS y CSS, (2) cómo escribir estilos usando LESS correctamente y (3) cómo compilar LESS en CSS con Grunt.
Estructura de archivos
La primera diferencia entre LESS y CSS radica en la estructura de archivos y en el método de conexión de estilos a un sitio.
Estructura de archivos CSS
Para conectar CSS, debe crear todos los archivos *.css necesarios y conectarlos a la página grabando en el archivo *.xml :
Una vez hecho esto, sus estilos llegan a la etiqueta <head> de su página y cada uno de los archivos CSS presenta una solicitud del servidor (si la combinación de CSS está deshabilitada).
En esto, las estáticas generadas se verán así:
Los archivos CSS de su módulo llegan a la carpeta version*** , así como a todos los demás archivos que responden, como .js e imágenes.
Estructura de archivos LESS
Al usar LESS, debe adherirse a otra estructura de archivos: /<Namespace>_<Module>/web/css/source/_module.less :
Debe mantener la estructura para módulos y para el tema general: <theme_dir>/web/css/…
Obtenga más información desde aquí .
La estructura de archivos LESS permite que la plataforma tome sus estilos y los reúna en uno o dos archivos styles-m.less , styles-l.less , que luego son generados por Magento.
En este caso, verá algo como esto en su navegador:
El archivo *.less entra en otro directorio y se recopila junto con otros estilos. En esto, el archivo .css generado ingresa a los archivos styles-m.css y styles-l.css .
LESS y sintaxis CSS
La segunda diferencia entre LESS y CSS radica en la sintaxis. Sin embargo, la sintaxis de LESS es un poco diferente de la de CSS, ya que el lenguaje de la hoja de estilo es un preprocesador de CSS.
Esto significa que cualquier código CSS es un código LESS válido (pero los elementos LESS adicionales no funcionarán en un CSS simple).
Puede obtener más información sobre la sintaxis LESS desde aquí .
Así es como se verá un CSS simple:
Y aquí están los mismos estilos escritos en MENOS:
Repasemos las diferencias en los detalles.
Consultas de medios de Magento
Magento 2 es compatible con el diseño web receptivo y los dispositivos móviles primero. Los temas predeterminados Blank y Luma usan la biblioteca de interfaz de usuario de Magento, que aplica consultas de medios CSS3.
Las consultas de medios de Magento 2 se realizan como mixin .media-width() que se puede usar en su archivo:
En este ejemplo, el botón con la clase .button tendrá un fondo dorado en las pantallas móviles (si no hay otras consultas de medios, el estilo será válido para todas las resoluciones de pantalla). Sin embargo, para la resolución de 768 px, el fondo será verde. Donde en la pantalla de 1024px el fondo será rojo:
La consulta de medios se generará en:
En consecuencia, @extremum puede tomar un valor ‘min’ o ‘max’ . Y @break tomará un valor de punto de interrupción. Donde @screen__m es una variable para el punto de interrupción. Puede encontrar su valor y otras variables aquí: vendor/magento/magento2-base/lib/web/css/source/lib/variables/_responsive.less:
mezclando lib-css()
Este mixin se aplica en Magento 2 para más manipulaciones con propiedades y variables.
Por ejemplo, puede eliminar propiedades definitivas sin necesidad de volver a escribir todo el estilo. Para esto, debes asignarlo a la variable false. Una vez hecho esto, no verá la propiedad durante la compilación:
Además, al usar mixin . lib-css() puede agregar automáticamente prefijos a las propiedades. Todo lo que necesita es agregar 1 a los argumentos de 3m. Por ejemplo: sin mezclar. lib-css():
Por ejemplo: cuando se usa mixin . lib-css():
Los estilos tendrán el siguiente aspecto en Chrome:
MENOS posibilidades
LESS brinda la oportunidad de usar variables, funciones y mixins. Como ya dijimos, esto nos da la oportunidad de hacer que el código sea más flexible y manejable .
Repasemos varias de las posibilidades LESS basándonos en otros ejemplos:
Por ejemplo: en el siguiente ejemplo, podemos ver lo fácil que es generar muchos estilos CSS del mismo tipo utilizando MENOS ciclos. Para esto, escribimos solo un pequeño ciclo LESS:
y después de la compilación, obtenemos las siguientes clases de CSS:
Por ejemplo: Además, al usar las funciones LESS podemos manipular los colores más fácilmente. Por ejemplo, la función oscurecer(); oscurece el color original:
MENOS:
CSS:
Al mismo tiempo, podemos usar mixins listos para usar para manipular la visibilidad, corregir, rotar el diseño flexible o dibujar un puntero.
Por ejemplo: Podemos dibujar una flecha y girarla 90 grados:
Se compilará en CSS de esta manera:
¿Cómo trabajar con LESS usando Grunt?
Hay varias formas de compilar LESS estilos en CSS. Describiremos los métodos más populares a continuación.
Puedes leer más sobre todas las formas aquí .
Compilar LESS en modo de producción
Para aplicar el método, primero debe limpiar los siguientes directorios:
- pub/static/frontend/<Proveedor>/<tema>/<localidad>
- var/caché
- var/ver_preprocesamiento
Una vez que se completa, debe iniciar la compilación de contenido estático con el siguiente comando: configuración de magento: contenido estático: implementación
Compilar LESS en modo desarrollador y predeterminado
Para este método, puede usar el ejecutor de tareas Grunt . Antes de la compilación, debe instalar NodeJS y grunt-cli en su máquina local.
Si quieres saber cómo instalarlos correctamente, lee aquí o mira el tutorial completo .
Una vez que Grunt está configurado, todo lo que necesita es usar el comando grunt exec:<theme> para volver a publicar los enlaces simbólicos en el directorio pub/static/frontend/<Vendor>/<theme>/<locale> . Luego aplique el comando grunt less:<theme> para compilar los archivos .less a CSS.
Para que su código LESS sea claro y legible, use los estándares de codificación Magento 2 LESS. Para obtener más información sobre las reglas generales de formato, lea aquí .
última palabra
Como puede ver, LESS brinda muchas más oportunidades para trabajar con estilos en Magento 2. Al utilizar LESS, puede escribir fácilmente estilos receptivos y no preocuparse por conectarlos a una página. Ya no necesita escribir mucho código homogéneo, que es difícil de mantener en el futuro.
Eso es un resumen por hoy. Esperamos que el artículo te haya dado una comprensión básica de la diferencia entre LESS y CSS, así como de sus principales beneficios.
Si aún tiene preguntas, escríbanos en los comentarios a continuación y haremos todo lo posible para responderlas.
¡Manténganse al tanto!