Share
No hace mucho echamos un vistazo a The Basics of LESS y, si bien esta es una referencia sólida para los principiantes, ¡hay mucho más que puedes hacer con LESS! El objetivo de este tutorial es ampliar el conocimiento del artículo anterior y brindarle algunos consejos prácticos sobre cómo utilizar todas las grandes cosas sobre MENOS.
Los conceptos en el artículo anterior serán esenciales para entender este. Las variables, los mixins, las funciones y el anidamiento en LESS deben ser familiares y usted debe tener al menos un poco de conocimiento práctico de LESS.
Nota: Hay una buena cantidad de consejos subjetivos en este artículo. Muchas cosas que discutiremos tienen que ver con la metodología en lugar de con las reglas y regulaciones de un idioma. Te mostraré cómo organizo los archivos y creo los mixins, pero podría haber otras formas mejores de hacer las cosas. Si crees que utilizas una estructura mejor, o tienes algunos consejos y trucos propios, siéntete libre de dejarte llevar por los comentarios..
Organizar tus archivos siempre es extremadamente importante, mucho también para MENOS. Normalmente creo una carpeta de 'estilos' en mi directorio principal del proyecto donde almaceno todos los estilos requeridos para ese proyecto. Entonces, ¿qué sucede si tu proyecto requiere que incluyas archivos css de varias ubicaciones??
La mejor manera de hacer tu vida más fácil es usar una herramienta como Winless o CodeKit. Estas herramientas le permiten compilar diferentes archivos en diferentes ubicaciones. Esto le permite mantener todos sus archivos de estilo en una ubicación mientras los compila en diferentes carpetas en sus proyectos.
Como puede ver, en este proyecto de WordPress el archivo 'style.less' resaltado está contenido dentro de la carpeta 'styles'. Ya que WordPress requiere un archivo 'style.css' en el directorio principal, necesitamos compilarlo allí. CodeKit o una herramienta similar lo hace fácil, ya que solo necesitas configurarlo una vez y luego puedes olvidarlo hasta el final del proyecto.
Otro problema que puede surgir con los archivos CSS es cómo manejar archivos de terceros. Los sistemas de cuadrícula, los estilos de los controles deslizantes de JavaScript, los restablecimientos y más requieren el uso de (a veces múltiples) archivos CSS. Generalmente hay dos métodos para hacer que esto suceda. Puede vincular los archivos a su página web por separado o colocar todo el código dentro de un archivo y minimizarlo para fines de rendimiento. Con una herramienta de compilador MENOS esto vuelve a ser más fácil!
Usando las reglas de importación, puede arrastrar todos los archivos a su hoja de estilos MENOS principal. También puede importar menos archivos, haciendo que sus reglas, combinaciones y otros elementos sean utilizables en todos los archivos subsiguientes..
Nota: Si bien este método es útil, no es una solución universal. En algunos casos, es posible que tenga que incluir todos los archivos por separado, en otros es mejor incluir todo dentro de un archivo.
El mayor problema con CSS es la extrema falta de consistencia en casi todos los proyectos. Esta situación se deriva principalmente de la naturaleza del lenguaje en sí, no necesariamente de la ineptitud del programador. CSS es un lenguaje muy vago e indulgente, lo que significa que promueve la configuración sobre la convención, mientras que sería preferible al revés. Además, los códigos CSS tienden a codificarse incluso de manera más procedimental que lo habitual, lo que significa que los patrones globales no siempre se notan y se implementan de la manera más simple posible..
Si bien LESS no es un recurso real, le permite ser mucho más consistente al proporcionarle herramientas como funciones y anidamiento. Veamos algunos ejemplos en los que puede lograr una mayor coherencia con las herramientas LESS..
.radio (@radius: 5px) -webkit-border-radius (@radius); -khtml-border-radius (@radius); -moz-border-radius (@radius); -ie-border-radius (@radius); -o-border-radius (@radius); radio del borde (@radius);
Sin MENOS deberías copiar y pegar estas reglas cuando sea necesario. Muchas personas solo escriben sobre la marcha, por lo que es mucho más probable que olvide uno de los prefijos o los escriba en un orden diferente. Si bien estos no serían agentes de ruptura para su sitio web, cada pequeña inconsistencia agrega un ruido innecesario a su código.
La naturaleza encajable de las reglas también le da la oportunidad de agregar orden a su código. Intento usar la menor cantidad de divs y otros elementos de contenedor que sea posible e intento apuntar a cada elemento tan específicamente como pueda.
.commentlist .comment .comment-date .comment-time color: # 888;
Esto parece un poco redundante al principio y estoy de acuerdo, en cierto sentido lo es. Sin embargo, deja todo muy claro..
La utilidad de esto solo será evidente si lo usa en un proyecto más grande, pero aquí hay un breve fragmento de código que muestra cómo un comentario responde. Debajo de un ancho específico, la parte del tiempo de la fecha del comentario se oculta para ahorrar espacio.
Pantalla @media y (ancho máximo: 600 px) .commentlist .comment-container .comment-main .comment-header .comment-date .time display: none;
Estoy de acuerdo en que esto se ve horrible. Sin embargo, no se pensó en crear la regla. No pensar significa retroceder fácilmente porque no necesita descubrir trucos inteligentes que haya agregado en el camino. Además, puedes ver lo que hace esta regla con solo mirarla.
Mi último argumento para la consistencia es más complejo, pero creo que vale la pena analizarlo. Construyo temas de WordPress para la venta en ThemeForest y una característica es que puedes elegir cualquier color para tu tema. Los elementos son recolored a su elección. La forma en que se hace esto es que cada vez que se define un 'color primario' se sobrescribe con el código CSS dinámico que generamos con PHP. Esto se ve algo como esto:
Contenidos de nuestro archivo LESS:
@ color-primario: rojo; .button background: @ color-primary; relleno: 8px 20px;
Contenido de un PHP incluido al final del encabezado HTML:
Básicamente, siempre que haya una referencia a '@ color-primary' en el archivo LESS, debemos crear una regla de PHP para asegurarnos de que los colores elegidos por el usuario se reflejen en el sitio. Esto puede tomar un tiempo y lo más importante es extremadamente aburrido. Para combatir el aburrimiento, estamos creando un script que analiza nuestro archivo LESS y crea el código PHP que podemos copiar y pegar de una sola vez. Esto es un poco difícil porque hay algunas reglas dinámicas con funciones y otras cosas, pero para poder extraerlo, nuestro archivo MENOS debe estar bien estructurado y ser coherente.
Un gran ahorro de tiempo y una forma de aumentar la coherencia en los proyectos es utilizar una biblioteca común de reglas. Anteriormente pregunté; ¿Por qué escribir todas las reglas del radio del borde cuando podemos usar una mezcla? Ahora podemos saltar un nivel más alto. ¿Por qué reescribir la mezcla del radio del borde para cada proyecto cuando puede usar el mismo??
Hay algunos mixins (especialmente los que abordan aspectos específicos del proveedor) que serán los mismos en todos los proyectos. Estos se pueden separar en un archivo 'mixins.less' que puede usar en cualquier lugar que desee. Aquí hay algunos ejemplos de mixins que siempre son útiles para tener alrededor.
.opacidad (@opacity: 0.8) @ieopacity: @opacity * 100; filtro: ~ "alfa (opacidad = @ ieopacity)"; -khtml-opacity: @opacity; -moz-opacidad: @opacidad; opacidad: @opacidad;
.gradiente (@start, @end) background: @start; filter: ~ "progid: DXImageTransform.Microsoft.gradient (startColorstr =" @ start ", endColorstr =" @ end ", GradientType = 0)"; fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, @ inicio), stop de color (100%, @ final)); fondo: -webkit-linear-gradient (arriba, @start 0%, @end 100%); fondo: -moz-linear-gradient (top, @start 0%, @end 100%); fondo: -ms-linear-gradient (top, @start 0%, @end 100%); fondo: -o-lineal-gradiente (arriba, @start 0%, @end 100%); fondo: gradiente lineal (arriba, @start 0%, @end 100%);
.color del elemento (@color) cuando (luminosidad (@color)> = 60%) color: @color - # 888; .elemento-color (@color) cuando (luminosidad (@color) < 60% ) color: #fff;
Este último es especialmente genial. Si el color de fondo es claro, el color del texto será una versión muy oscura del mismo color..
Sugiero siempre pensar en la colocación de la regla que está escribiendo. ¿Está seguro de que se utiliza globalmente para todos los proyectos? Puede ser tentador poner un montón de reglas ahí, pero en realidad podría ser mejor crear un archivo específico del proyecto también..
¿Recuerdas la imagen del comentario anterior? El contenedor de ese elemento tiene un formato específico. Tiene un borde blanco y un contorno gris. Muchos otros elementos en este tema comparten este patrón. Esto podría ser creado con una regla como tal:
.cuadro borde: 1px sólido #fff; esquema: 1px solid #dedede; .caja de comentarios; fondo: #eeeeee;
Mientras esto es utilizado en todo el lugar aquí, no será el mismo en múltiples proyectos. Por lo tanto, sería mejor crear un archivo como 'mytheme.less' que contenga estas reglas ampliamente utilizadas, pero específicas del tema. Si realmente quieres usar algo como en el archivo global, puedes expandirlo así:
.borde de cuadro (@ border-color: #fff, @ outline-color: #dedede) border: 1px solid @ border-color; contorno: 1px solid @ outline-color;
Esta regla le permitirá crear el mismo estilo de cuadro con la misma facilidad, pero también puede agregar parámetros para crear bordes de cuadro de diferentes colores. Puede ir un paso más allá abstrayendo las cosas aún más y creando un archivo 'bootstrap.less'; Esto nos lleva bien a nuestro próximo tema, creando un marco para nosotros mismos..
@ border-box-border-color: #fff; @ border-box-outline-color: #dedede;
.borde de cuadro (@bc: @ border-box-border-color, @oc: @ border-box-outline-color) border: 1px solid @bc; esquema: 1px sólido @oc;
Por lo general, crear su propio marco de trabajo es un no-no, a menos que esté muy avanzado en su campo principal (y en otros 5-6 otros) y tenga muy buenas razones para hacerlo. Con CSS y LESS es un poco diferente; Puedes comenzar a crear tu propio marco desde el primer día. Dado que LESS es un superconjunto de CSS, todo lo que haga encaja perfectamente en el código existente. Dado que CSS perdona y está en cascada, no se puede hacer ningún daño permanente que no pueda deshacerse..
Sugiero crear un archivo principal 'mixins' para empezar. Siempre puedes quitar cosas de él o agregarlas según sea necesario. Posteriormente, puede agregar archivos específicos del proyecto, archivos de terceros, un archivo de rutina de carga, etc. Así es como está organizado mi framework.
Al igual que con cualquier idioma, los aspectos prácticos de la codificación contienen muchos desafíos y técnicas diferentes que no se pueden descubrir y superar con solo mirar la documentación. Para usar LESS en toda su extensión, debes leer las sugerencias e intentar asimilar la lógica, pero al final tendrás que ganar experiencia. La coherencia, la lógica y la simplicidad deben ser sus palabras de guía y LESS le brinda todas las herramientas para lograrlo..
Finalmente, agradecería sus comentarios y me gustaría escuchar cómo organiza MENOS y cómo lo implementa en sus proyectos. Gracias por leer!
Accentsconagua