Post Top Ad

Your Ad Spot

miércoles, 26 de agosto de 2020

¿Qué es CSS en Magento 2?

Descubra qué son CSS y LESS y cómo utilizarlos para mejorar su tienda online. Te explicamos cómo editar CSS en el panel de administración y qué diferencias puedes observar en CSS en Magento 1 y Magento 2. Sube de nivel tu ecommerce con el blog BelVG.
Tabla de contenido:
¿Qué es CSS en Magento 2?
¿Qué es MENOS en Magento 2?
¿Cuál es la diferencia entre LESS y CSS?
¿Dónde se encuentran los archivos CSS en Magento 2?
¿Qué son los CSS del tema padre y del tema hijo de Magento?
Cómo agregar archivos CSS personalizados en Magento 2
Cómo agregar archivos LESS personalizados en Magento 2
Cómo editar CSS en el panel de administración en Magento 2
Comparación de CSS en Magento 1 vs Magento 2

¿Qué es CSS en Magento 2?

El principal beneficio de CSS es que crea una apariencia uniforme de varias o incluso todas las páginas del sitio web. En lugar de definir estilos manualmente para cada elemento, un desarrollador especifica todas las configuraciones visuales en un solo documento CSS. Permite ahorrar una gran cantidad de tiempo y esfuerzo. Además, cualquier alteración en el estilo se aplica automáticamente a todas las páginas para las que se utilizó. Además, CSS es compatible con múltiples dispositivos y navegadores, lo que significa que no se requiere una optimización sofisticada.
Debido a todos estos beneficios, CSS se ha convertido en un aspecto importante del desarrollo de frontend de Magento. Si se esfuerza por ser un buen desarrollador de Magento, el conocimiento y las habilidades de CSS son imprescindibles.

¿Qué es MENOS en Magento 2?

La plataforma de comercio electrónico Magento incorpora de forma nativa un preprocesador llamado LESS. LESS simplifica el proceso de trabajar con CSS y amplía sus capacidades. Proporciona acceso a una amplia gama de variables, funciones, reglas anidadas, operaciones y combinaciones, que llevan el proceso de escritura de estilos al siguiente nivel. Además, los cambios en los archivos de entrada están disponibles de inmediato con LESS. Además, LESS admite la carga diferida o carga dinámica de funciones que le da al desarrollador la libertad de definir y usar variables cuando y donde lo desee.
LESS es una introducción relativamente reciente a la funcionalidad de Magento: se introdujo en la versión Magento 2 en 2015. Antes de eso, Magento 1 utilizaba el otro preprocesador CSS, SaSS, de forma predeterminada. Aún puede usarlo como su preprocesador, si es necesario. Ambas soluciones tienen varias similitudes, desde la sintaxis hasta la funcionalidad. Entonces, ¿por qué no SaSS? MENOS es más confiable. Los desarrolladores de Magento querían usar una tecnología con una implementación PHP estable, y MENOS la tenía. LESS sigue siendo el procesador nativo de Magento, lo que demuestra que hace su trabajo de manera efectiva.
servicios de desarrollo magento

Desarrollo de Magento

Permítanos construir una impresionante tienda en línea desde cero para usted
VISITA LA PAGINA

¿Cuál es la diferencia entre LESS y CSS?

Estructura de archivo

Los archivos LESS tienen la extensión .less. Los navegadores no reconocen archivos con la extensión .less y no pueden aplicar estilos de ellos a las páginas del sitio. Por lo tanto, todos los archivos .less deben precompilarse en archivos .css familiares. Para eso usamos los llamados compiladores. Por ejemplo, Magento tiene compiladores integrados para estos fines, que le permiten compilar MENOS archivos en archivos CSS tanto en el lado del servidor como del cliente (puede encontrar más información al respecto aquí ). Magento también permite compilar MENOS en CSS usando Grunt. Cómo hacerlo, puedes encontrarlo aquí .

Sintaxis

LESS es un complemento de CSS. Entonces, todas las reglas y sintaxis de un archivo .css funcionan en un archivo .less. En otras palabras, si escribimos un código CSS en un archivo .less, funcionará sin problemas después de compilar LESS en CSS. Al mismo tiempo, LESS tiene características adicionales de las que carece CSS, como variables, lógica, operaciones de cálculo, piezas de código reutilizables y otras. Estas características adicionales tienen su propia sintaxis, diferente de la sintaxis CSS.
Hay un ejemplo del código en CSS:

Puede componerlo de forma más compacta en el archivo LESS (se llama formato de código de anidamiento ):

Después de compilar el archivo .less en un archivo .css, el código se verá como el código CSS.
He aquí otro ejemplo. MENOS tiene algo interesante: & (Ampersand) . Se utiliza para referirse al selector actual. Esto puede ser útil para establecer estilos para varios estados de elementos, para sus pseudoelementos, el siguiente elemento de una fila y otros. Veámoslo en el ejemplo:

Como resultado, después de compilar el archivo .less en un archivo .css, obtenemos lo siguiente:

Hemos proporcionado solo algunos ejemplos de la nueva sintaxis en LESS. Puede encontrar más información sobre la sintaxis aquí .

LESS brinda la oportunidad de usar variables, funciones y combinaciones

Consideremos en detalle las siguientes características LESS adicionales, como variables, mixins y funciones.
Variables
Las variables en LESS tienen una funcionalidad similar a las de programación. Se utilizan para conservar algún valor y aplicarlo posteriormente en otros lugares.
El nombre de la variable comienza con el icono @, por ejemplo:
@ variable-ejemplo
Cómo utilizar la variable, por ejemplo:

En el ejemplo anterior, establecemos el valor # 222222 en la variable @ color-example. Después de compilar el archivo .less en un archivo .css, habrá la siguiente regla:

Lo siguiente que necesita saber es el alcance variable .
En el ejemplo anterior, vio variables que se declaran globalmente; están disponibles en cualquier lugar del archivo .less. Sin embargo, si declara una variable dentro de la regla CSS, solo estará visible dentro de esta regla CSS. Cuando intenta acceder a esta variable fuera de esta regla, hay un error de compilación.
Por ejemplo:

Como resultado, el archivo no se compila.
Puede cambiar el valor de la variable global dentro de la regla CSS. Esto no afectará el valor de la variable fuera de esta regla.
También puede asignar a una variable el valor de otra variable de la siguiente manera:

Cuando cambia el valor de la variable @ color-example-1 , el valor de la variable @ color-example-2 cambia automáticamente.
Puede encontrar más información sobre las variables aquí .
Mixins
Se necesitan mixins para reutilizar fragmentos de código.
Por ejemplo, muchos elementos de la página tendrán animaciones similares. Por lo tanto, puede crear un mixin .animation-1 con un conjunto de propiedades de animación:

Entonces puede usar el mixin en cualquier lugar, donde sea necesario:

Como resultado, después de compilar el archivo .less en un archivo .css, el elemento .example-1 tiene lo siguiente:

También hay mixins con parámetros. Cuando se llaman estos mixins, les pasamos valores de parámetros. Al crear un mixin de este tipo, se recomienda establecer valores de parámetro predeterminados (o podrían ocurrir problemas al llamar al mixin sin especificar el valor del parámetro). Hagamos un mixin con los parámetros del ejemplo anterior y veamos cómo llamarlo:

Establecemos los parámetros de mezcla entre paréntesis (puede haber uno o varios) con los valores predeterminados (los valores predeterminados se establecen después de dos puntos).
Cuando se llama a un mixin entre paréntesis, indicamos los valores de esos parámetros de mixin que diferirán de los predeterminados. Si no especificamos un solo parámetro agregando el mixin como este - .animation-1, el mixin se agregará con los valores de parámetro estándar.
Como resultado, después de compilar el archivo .less en un archivo .css, el elemento .example-1 tiene el siguiente aspecto:

Magento requiere nombrar los parámetros de mezcla usando @_ en lugar de @. Entonces, el parámetro @ animation-speed del ejemplo anterior se llamaría @ _animation-speed .
Puede encontrar más información sobre mixins aquí .
Desarrollo de Magento 2

Desarrollo de Magento 2

Inicie su negocio en línea con Magento 2
VISITA LA PAGINA
Funciones
LESS tiene operaciones aritméticas (suma, resta y otras) con propiedades.
Por ejemplo:

Como resultado, después de compilar el archivo .less en un archivo .css, obtenemos lo siguiente:

LESS también tiene otras funciones matemáticas, como round (), ceil (), floor () y percent ().

MENOS facilita la manipulación de colores

LESS también brinda la oportunidad de realizar diversas manipulaciones con colores.
Por ejemplo, podemos combinar o restar 2 colores para obtener el nuevo.

El resultado después de la compilación:

También hay funciones de color para hacer que el color sea más claro, más oscuro, más brillante, más tenue y otros. Entonces, necesitamos las siguientes funciones: aclarar (), oscurecer (), desaturar () y otras ..
Si desea que el color, por ejemplo, sea un 20% más oscuro, haga lo siguiente:

Puede encontrar más información sobre las manipulaciones de color aquí .

¿Dónde se encuentran los archivos CSS en Magento 2?

Después de la compilación, todos los archivos CSS resultantes se ubicarán en la siguiente ruta:
pub / static / frontend / <Nombre del proveedor> / <Nombre del tema> / <configuración regional>
dónde
  • <Vendor_Name> : nombre de la carpeta del proveedor que contiene su tema,
  • <Theme_name> : nombre de su tema,
  • <locale> : nombre de la ubicación actual del sitio (por ejemplo, en_US).
Estos archivos se forman en base a los archivos originales LESS y CSS, ubicados en varios lugares de Magento. Para comprender completamente este sistema, echemos un vistazo a los archivos de estilo principales de Magento:
Los archivos de estilo tienen la siguiente estructura:
  • / <Namespace> _ <Module> / web / css es la ubicación de los archivos de estilo para diferentes módulos;
  • / web / css  es la ubicación de los archivos de estilo principales.
La lista de archivos del tema principal, ubicada en la carpeta de temas / web / css :
  • styles-m.less  contiene los estilos principales de sitios web y dispositivos móviles. Este archivo contiene otros archivos, por ejemplo, _styles.less.
  • styles-l.less   contiene estilos para dispositivos de escritorio. También contiene otros archivos, por ejemplo, _styles.less.
  • _styles.less  es un archivo compuesto que contiene otros archivos de estilo. De acuerdo con los estándares de nomenclatura de archivos de Magento, el símbolo de subrayado (“_”) significa que el archivo no se usa por separado, sino que es parte de otros archivos.
  • / source  es la carpeta que contiene los archivos de configuración que llaman a los mixins de la biblioteca de la interfaz de usuario de Magento.
  • /source/_theme.less  es el archivo que contiene nuevos valores para variables estándar.
  • print.less : estilos para la versión impresa del sitio web.
  • /source/_variables.less  es el archivo donde se colocan comúnmente las variables de usuario.
Además de los archivos de estilo principales, puede conectar archivos adicionales a su tema. Como regla general, se ubicarán en su carpeta de temas en la ruta / web / css .
Si desea cambiar los archivos de estilo, le recomendamos que lo haga en los archivos fuente. También le recomendamos encarecidamente que no cambie los archivos resultantes. Los cambios se anularán en caso de una compilación posterior.

¿Qué son los CSS del tema padre y del tema hijo de Magento?

Como regla general, un tema personalizado se hereda de otro tema. En este caso, el tema personalizado es secundario, mientras que el tema del que se hereda, el principal.
El tema hijo tendrá los mismos estilos que el padre de forma predeterminada. Si un determinado elemento del sitio web tiene un valor de regla CSS de un tema principal, será diferente del tema secundario (por ejemplo, el color del texto) y el tema secundario tendrá prioridad. Además, si el tema secundario contiene un archivo CSS con el mismo nombre y la misma ruta, como el principal, el archivo de tema secundario anulará completamente el archivo de tema principal correspondiente durante la compilación CSS final.

Cómo agregar archivos CSS personalizados en Magento 2

¿Dónde cambiar estilos en Magento 2? Puede cambiarlos en los archivos LESS o CSS agregados o en los archivos del módulo Magento. Si desea agregar sus propios estilos para un módulo específico, puede usar 2 archivos en la carpeta del módulo en su tema:
 _module.less contiene los estilos básicos para el módulo en el que se encuentra. Como regla general, creamos este archivo en el tema cuando queremos cambiar significativamente los estilos de este módulo.
_extend.less contiene estilos adicionales para el módulo en el que se encuentra. Como regla general, creamos este archivo para agregar cambios menores al módulo o estilos para nuevos elementos que no han sido estilizados en el módulo actual antes. Si no queremos reescribir los estilos de módulos existentes, la mejor manera será crear un archivo de este tipo.

Cómo agregar archivos LESS personalizados en Magento 2

Además de los archivos nativos, también puede utilizar archivos de estilos personalizados, por ejemplo, archivos de bibliotecas de terceros, archivos de estilos personalizados, etc.
Como regla general, dichos archivos están conectados en el siguiente archivo:
<tu_tema_dir> /Magento_Theme/layout/default_head_blocks.xml
Para la conexión, agregue a la etiqueta <head /> en el archivo default_head_blocks.xml el <css /> o <link />. La primera etiqueta se usa específicamente para archivos de estilo, mientras que la segunda puede conectar tanto archivos de estilo como JavaScript. Dado que estas etiquetas tienen una sintaxis similar, tomaremos la etiqueta <css /> como ejemplo:
<css src = ”<ruta> / <archivo>” media = ”imprimir | <opción>” />
Dónde
  • <ruta> es la ruta al archivo relativa a <su_tema_dir> / web . Si desea agregar un enlace al archivo, ubicado en la carpeta del módulo de su tema, use <Namespace> _ <Module> :: <path_to_file> (por ejemplo, si agrega Magento_Theme :: , la ruta comenzará en relación con <your_theme_dir > Magento_Theme / web / ).
  • <archivo> es el nombre del archivo conectado en formato .css.
  • media es el atributo que se utiliza para determinar parámetros adicionales del archivo adjunto. Por ejemplo, un archivo con el parámetro media = "print" se utilizará para la versión impresa de la página web, mientras que el archivo con media = "screen y (min-width: 768px)" se aplicará únicamente para dispositivos con dimensiones de pantalla. de 786 píxeles y más.
  • src_type = ”url” es un atributo adicional, que indica que el archivo se conecta desde otro servidor y la ruta “src” se especificará de forma absoluta, no relativa al tema. Por lo tanto, use este atributo para conectar estilos de otros sitios web.

Como resultado, se agregará el siguiente archivo:
<tu_dir_tema> Magento_Catalog / web / css / source / lib / test.css
Consideremos cómo agregar CSS a la página CMS y los bloques CMS en Magento 2. Las páginas CMS tienen una opción para incluir archivos de estilo en el campo XML de actualización de diseño en la pestaña Diseño . Cómo agregar archivos de estilo en archivos XML que puede encontrar arriba.
Cómo editar CSS en el panel de administración en magento 2

Comparación de CSS en Magento 1 vs Magento 2

Generalmente, Magento 2 tiene un proceso mejorado para trabajar con archivos CSS, en comparación con Magento 1. Aparte de esto, Magento 2 no solo tiene archivos CSS estándar, sino también los siguientes elementos:
  • El compilador LESS incorporado le permite trabajar con archivos LESS compilando estos archivos en archivos CSS finales. Usar LESS simplifica y acelera enormemente el proceso de creación de estilos para un sitio, ya que obtenemos funcionalidad LESS adicional (en resumen, estas son variables, mixins, formato de código de anidamiento y otros).
  • La biblioteca de UI usa el preprocesador LESS y consta de archivos LESS, que usan conjuntos de mixins y variables para diseñar todos los elementos principales del sitio (como botones, formularios, navegación y otros). Puede encontrar una lista completa de elementos disponibles para diseñar aquí . La biblioteca de la interfaz de usuario le permite simplificar significativamente el proceso de estilo del sitio. Por ejemplo, puede cambiar varias variables de la biblioteca de IU y obtener un sitio web significativamente transformado.
Otra diferencia es la ubicación de los archivos de temas CSS. En Magento 1, estaban ubicados en la siguiente ruta:
/ skin / frontend / <Nombre del proveedor> / <Nombre del tema> / css.
Mientras que los archivos de estilo de tema en Magento 2 están más estructurados y se dividen en archivos de estilo comunes ( <Theme_folder> / web / css ) y archivos de estilo de módulo ( <Theme_folder> / <Namespace> _ <Module> / web / css ), a los que aplicar.

Envolviendolo

Esperamos que obtenga una guía completa de CSS en Magento 2 y comprenda cómo usarla en su sitio web. Además, intentamos compartir todo nuestro conocimiento MENOS y explicar cómo aplicarlo en Magento. Si tiene alguna pregunta o comentario, no dude en dejarlos a continuación.
¿Busca un equipo de desarrollo de Magento con experiencia Acuda a BelVG para obtener soluciones personalizadas.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas