Share
Less.CSS se está convirtiendo en una herramienta popular para hacer las hojas de estilo "dinámicas". He estado trabajando con la integración de Less.CSS con WordPress por un tiempo, por lo que hoy veremos un breve tutorial sobre cómo empezar a usarlo y el marco de trabajo de BluePrint CSS para un flujo de trabajo más rápido en WordPress..
Sé lo que estás pensando, pero, lo siento, no significa que simplemente escribas el código MENOS. ¿Cuántas veces ha estado trabajando en un proyecto y deseaba poder simplificar las cosas al incluir una función en su archivo CSS, usar algunas variables para cambiar los colores u otras propiedades u otras técnicas similares de programación? Con Less CSS, tu deseo puede convertirse en realidad..
Less es una herramienta CSS que le permite acelerar y simplificar su desarrollo permitiéndole usar variables, herencia (a través de combinaciones), funciones (operaciones) y más. En pocas palabras, Less CSS le da la posibilidad de mezclar técnicas de programación con su CSS. Aunque basta de hablar. Empecemos!
Less se presenta en dos versiones principales, una versión compilada y una versión con JavaScript. Para el propósito de nuestra discusión, nos centraremos en el compilado versión. Elegí enfocarme en esta versión principalmente porque no me gusta incluir archivos en mi sitio que no tengo que hacerlo. Después de todo, cada archivo que su sitio necesita para funcionar y verse atractivo hace que el sitio se cargue un poco más lento..
Entonces, la forma en que funciona es la siguiente: visita el siguiente enlace y descarga la aplicación para mac. Lo sentimos usuarios de Windows, es solo para Mac, por lo que esta versión del tutorial solo funcionará para usuarios de Mac. Una vez que descargues la aplicación, debes configurar la estructura de tu sitio (que veré más adelante).
Cubriremos una gran cantidad de contenido en este tutorial. Creo en trabajar lo más eficientemente posible con las mejores herramientas disponibles. Por esta razón, estaremos empleando WordPress y Cianotipo Para trabajar con este proyecto. Antes de pasar al siguiente paso, siga adelante y descargue Blueprint Framework..
El único archivo que vamos a utilizar es screen.css ya que combina todos los archivos principales que conforman el marco en un solo archivo. Ve y encuentra eso y sácalo a tu escritorio. A efectos de brevedad, este tutorial asume que está familiarizado con la configuración de WordPress, así como con los conceptos básicos de Blueprint. Si necesita más información sobre este tema, déjeme algunos comentarios y le responderé o escribiré un post en él. También hay una guía informativa sobre Nettuts sobre Blueprint.
Para configurar su estructura de archivos, consulte la captura de pantalla a continuación. Este es el aspecto que debería tener la estructura de su directorio, menos los archivos CSS en la carpeta de hojas de estilo. Estos se generarán automáticamente cuando guarde un archivo.
Lo importante a tomar de esta captura de pantalla es que tenemos una carpeta styles.css en el directorio del tema en WordPress que hace algunos trucos. Este archivo simplemente extrae algunos otros archivos de un subdirectorio a través de la directiva @import. La razón de esto es que WordPress usa los comentarios en estilos.css para identificar un tema. No poner eso tiende a arruinar las cosas bastante mal. Incluyendo archivos en el estilos.css A través de un archivo compuesto, esencialmente estamos aprovechando todas las características dinámicas de Less CSS y nos aseguramos de que nuestro tema se comporte correctamente en WordPress. También estamos reduciendo nuestro CSS, para acelerar el tiempo de carga del sitio. Además, se eliminarán todos los comentarios y espacios en blanco..
Hay algunos ajustes que me gusta comprobar. Probablemente quieras hacer eso también. A continuación se muestra una captura de pantalla de estos.
A continuación, coloque el screen.css archivo en un subdirectorio llamado hojas de estilo junto con un archivo main.css. Luego renombra ambos archivos para tener una extensión .less en lugar de .css. Una vez que haya hecho eso, siga adelante, active la aplicación Menos en su Mac y arrastre su carpeta de temas a la Aplicación. Básicamente, esto lo configura para que la aplicación Less sepa sobre su proyecto. Ahora, cada vez que guarde sus menos archivos, se compilarán automáticamente en CSS. Bastante ingenioso eh? Si por alguna razón esto no sucede, puede hacer clic en la pestaña del compilador y hacer clic en compilar todo.
Ok, ahora que todo esto está configurado, ¿qué es lo que realmente hace Menos por mí? Me alegra que le hayas preguntado al joven Padawan. Deja que te enseñe!
Entonces, digamos que tienes algunos colores primarios en tu sitio web. En lugar de tener que poner los valores hexadecimales o RGBA cada vez que quiera usar un color, simplemente puede usar una variable para almacenar su color y luego usar el nombre de la variable para identificar el color que desea usar. Por ejemplo, para almacenar gris claro puedes declarar una variable así:
@lightGray = #ddd; / * - y luego utilícelo en su css así: - * / div # box1 background: @lightGray;
Ahora, cuando necesite cambiar su color, todo lo que tiene que hacer es cambiar el valor de @lightGray y lo propagará todo al resto de su archivo css..
El siguiente truco ingenioso que quiero discutir es la herencia. Para los novatos en CSS, la herencia solo significa que una clase puede heredar o recoger rasgos de una clase anterior (clase principal). Esto se hace mediante una construcción Less conocida como Mixins. Estos prácticamente integran todas las propiedades de una clase dentro de otra clase. Una de las cosas interesantes de Mixins es que cualquier propiedad que especifique en su clase secundaria anulará el mismo comportamiento que se está heredando de la clase principal. En un lenguaje sencillo, esto significa que tengo una clase que compone mis botones en mi página usando algunos gradientes css3 prácticos. Aunque me gusta el relleno, el tamaño de fuente y otros atributos en el botón, es posible que desee que cambien mis colores. Yo haría lo siguiente:
/ * - Botón que estoy usando como botón base / principal - * / .myBlueButton display: block; relleno: 4px 12px; fondo: rgb (30,87,153); / * Navegadores antiguos * / fondo: -degroluz-lineal (arriba, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1) 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, rgba (30,87,153,1)), color-stop (50%, rgba (41,137,216 , 1)), color stop (51%, rgba (32,124,202,1)), color stop (100%, rgba (125,185,232,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232) , 1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba ( 125,185,232,1) 100%); / * IE10 + * / background: gradiente lineal (arriba, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ); / * W3C * / / * - Botón que estoy usando como botón secundario / hereditario - * / .myGreenButton .myBlueButton; fondo: rgb (157,213,58); / * Navegadores antiguos * / fondo: -moz-lineal-gradiente (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188,10,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, rgba (157,213,58,1)), color-stop (50%, rgba (161,213 , 79,1)), color stop (51%, rgba (128,194,23,1)), color stop (100%, rgba (124,188,10,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% , rgba (124,188,10,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) ) 51%, rgba (124,188,10,1) 100%); / * Opera11.10 + * / background: -ms-linear-gradient (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / background: gradiente lineal (arriba, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
Hay una advertencia a tener en cuenta. Si está utilizando el generador de gradiente css3, parece que a Less no le gusta la línea que comienza con el filtro. Como puede ver, el botón secundario capta todo el comportamiento del botón primario incluyendo los atributos del botón azul en la línea marcada.
myBlueButton;
.
A continuación, anula el color especificando sus propios colores de fondo. El siguiente y último elemento que cubriremos es el uso de una mezcla paramétrica (una mezcla que toma parámetros) con Menos. Esto es útil en casos en los que está utilizando prefijos específicos del navegador y.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; -border-radius: @border_radius;
Por supuesto, hay muchos más comportamientos y efectos que puedes implementar. Puede seguir el enlace que se encuentra en la parte superior de la página del sitio de Less y estudiar hasta el fondo de su corazón. También hay un video de consejos rápidos sobre Nettuts que habla sobre la biblioteca Less.js.
Eso es lo básico de cómo configurar un proyecto para usar en WordPress con Less y BluePrint. Espero que lo que aprendió hoy aquí le resulte útil en futuros proyectos. Si tiene más preguntas, no dude en responder en los comentarios..
Accentsconagua