Hasta ahora ya hemos visto como se estructura un CSS, usando clases e ids, ordenando las etiquetas del HTML convenientemente, aunque para páginas grandes solemos utilizar muchas veces el mismo color para varios elementos y anidar etiquetas que son difíciles de leer en al tener mucho código, por esta razón existen herramientas como SASS y LESS, lenguajes basados en CSS que facilitan mucho su escritura y entendimiento.
Ahora bien existen 2 formas de usar LESS, podemos compilar el archivo LESS y generar el CSS que necesita el navegador:
1 - Hola LESS
Lo primero que vemos es que dentro del archivo html se tiene primero al link del archivo 1-estilo.less y al final del body se llama la librería de LESS ¡el orden es muy importante!
LESS nos incluye dentro de sus funciones la posibilidad declarar variables, esto es realmente un gran aporte, ya que gracias a esto podemos hacer solo un cambio en el valor de la variable y se reflejara en todos los lugares que la usemos naturalmente.
Declarar una variable dentro de un archivo LESS es muy fácil, solo se coloca @ seguido de nombre de la variable y luego de : colocamos el valor, cerrando la expresión con ;. Podemos tener variables de todos los tipos que se usan dentro de un CSS, números, valores hexadecimales, unidades de píxeles, entre otros.
Para este ejemplo se tiene únicamente declarada la variable base y se usa su valor en la propiedad de color de fondo de la clase texto.
2 - Herencia
Esta propiedad de herencia resulta bastante importante, ya que podemos declarar una clase o id y hacer que otros adopten todos los atributos que esta posea. Como ocurre en el ejemplo, se tiene declarada la clase bordes con varias propiedades, donde el border-radius depende del valor de la variable radio, cuyo valor sera de 5 píxeles a menos que se le sea pasado otro argumento. Fíjense que a la hora de declarar el area azul no se le pasa el ningún valor de radio a la clase bordes, queriendo decir que tomará el valor por defecto de 5 píxeles, mientras que en area roja le pasamos el valor de 10 píxeles.
La herencia nos permite incluir comportamientos extras en los hijos y es por eso que las áreas roja y azul tienen colores diferentes, aunque prodríamos mejorar la clase bordes e incluir un parámetro de color de fondo y se lo pasamos sin problema al heredarlo.
3 - Anidamiento
Esta herramienta nos permite declarar el comportamiento de una entidad de la forma intuitiva en la que lo hace una cascada, es decir que podemos agregar la declaración de una entidad dentro de otra y el compilador de LESS generará lo que el CSS entiende de este anidamiento, por tanto la entidad interna tendrá el comportamiento esperado siempre y cuando se declare dentro de la que la envuelve.
Ejemplo de esto lo vemos en el archivo 3-estilo.less donde se declara el id area y este tiene que el color de azul para todo h1 que sea declarado dentro de área. A su vez, se tiene que todo párrafo dentro área tendrá un tamaño de fuente de 20 píxeles, además si incluye un link con la etiqueta a este no tendrá decoración pero si se le asoma el el ratón encima este coloreara de rojo el texto.
4 - Funciones
Otra habilidad que nos permite LESS es la capacidad de tener operaciones matemáticas para asignar un valor a los atributos. Gracias a las funciones podemos mejorar en mucho nuestro código para generalizar más los cálculos que dependan de variables. Tenemos funciones como desaturate que incluye la librería de LESS, pero pueden encontrar muchas más en la página oficial de LESS.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
Ahora bien existen 2 formas de usar LESS, podemos compilar el archivo LESS y generar el CSS que necesita el navegador:
- Desde el cliente: Esto seria usando la libreria de less.js desde nuestra página. Para acceder a ella pueden descargarla de la página oficial de LESS o descargarla junto al material del tutorial aquí.
- Desde el servidor: Este método requiere que movamos los archivos manualmente con un programa aparte. Claro que se puede usar un script para automatizar el proceso.
1 - Hola LESS
Lo primero que vemos es que dentro del archivo html se tiene primero al link del archivo 1-estilo.less y al final del body se llama la librería de LESS ¡el orden es muy importante!
LESS nos incluye dentro de sus funciones la posibilidad declarar variables, esto es realmente un gran aporte, ya que gracias a esto podemos hacer solo un cambio en el valor de la variable y se reflejara en todos los lugares que la usemos naturalmente.
Declarar una variable dentro de un archivo LESS es muy fácil, solo se coloca @ seguido de nombre de la variable y luego de : colocamos el valor, cerrando la expresión con ;. Podemos tener variables de todos los tipos que se usan dentro de un CSS, números, valores hexadecimales, unidades de píxeles, entre otros.
Para este ejemplo se tiene únicamente declarada la variable base y se usa su valor en la propiedad de color de fondo de la clase texto.
2 - Herencia
Esta propiedad de herencia resulta bastante importante, ya que podemos declarar una clase o id y hacer que otros adopten todos los atributos que esta posea. Como ocurre en el ejemplo, se tiene declarada la clase bordes con varias propiedades, donde el border-radius depende del valor de la variable radio, cuyo valor sera de 5 píxeles a menos que se le sea pasado otro argumento. Fíjense que a la hora de declarar el area azul no se le pasa el ningún valor de radio a la clase bordes, queriendo decir que tomará el valor por defecto de 5 píxeles, mientras que en area roja le pasamos el valor de 10 píxeles.
La herencia nos permite incluir comportamientos extras en los hijos y es por eso que las áreas roja y azul tienen colores diferentes, aunque prodríamos mejorar la clase bordes e incluir un parámetro de color de fondo y se lo pasamos sin problema al heredarlo.
Esta herramienta nos permite declarar el comportamiento de una entidad de la forma intuitiva en la que lo hace una cascada, es decir que podemos agregar la declaración de una entidad dentro de otra y el compilador de LESS generará lo que el CSS entiende de este anidamiento, por tanto la entidad interna tendrá el comportamiento esperado siempre y cuando se declare dentro de la que la envuelve.
Ejemplo de esto lo vemos en el archivo 3-estilo.less donde se declara el id area y este tiene que el color de azul para todo h1 que sea declarado dentro de área. A su vez, se tiene que todo párrafo dentro área tendrá un tamaño de fuente de 20 píxeles, además si incluye un link con la etiqueta a este no tendrá decoración pero si se le asoma el el ratón encima este coloreara de rojo el texto.
4 - Funciones
Otra habilidad que nos permite LESS es la capacidad de tener operaciones matemáticas para asignar un valor a los atributos. Gracias a las funciones podemos mejorar en mucho nuestro código para generalizar más los cálculos que dependan de variables. Tenemos funciones como desaturate que incluye la librería de LESS, pero pueden encontrar muchas más en la página oficial de LESS.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
No hay comentarios:
Publicar un comentario