LESS

LENGUAJE DE HOJAS DE ESTILO

Integrantes
Participación

■ Dania Ibeth Castro De la Roca 1590-15-15081 100%

■ Karen Minnelly Sindro Hernández 1590-15-14354 100%
■ Víctor Hugo Sindro Hernández 1590-15-20183 100%
■ Raúl Walberto Salazar Monroy 1590-15-12211 100%
■ Julio Alessandro Pineda García 1590-15-13857 100%
■ José Carlos Pérez García 1590-15-22991 100%
 ¿Qué es LESS?
LESS CSS, es un preprocesador para CSS, una
ampliación a las famosas hojas de estilo CSS.
 ¿Por qué es necesario conocerlo y
aplicarlo?
LESS CSS es una hoja de estilos css completamente
funcional y compatible, simplemente ofrece mejoras
en el área de desarrollo, por lo que usarlo se vuelve
recomendable si quieres ahorrar tiempo de desarrollo,
utilizar características avanzadas de estilos y para
ahorrarte trabajo.
¿Por qué es importante en el desarrollo
web?
Less ofrece a los desarrolladores mucha más
flexibilidad: se pueden definir, por ejemplo, reglas
personalizadas para un tipo concreto de elementos
que se apliquen a toda la hoja para, de este modo, no
tener que realizar tediosas repeticiones de código.
CARACTERISTICAS DE LESS CSS

Variables:
Las variables en less funcionan de
forma similar a las constantes en los
lenguajes de programación,
permitiendo definir valores que
podrán ser reutilizados en cualquier
parte de la hoja de estilo, e incluso
entre otras hojas de estilo. Su sintaxis
es la siguiente:
Mixins
Los mixins son clases dinámicas,
porque funcionan de forma similar a
las clases CSS pero con
características de funciones de
programación. Es decir que pueden
ser llamadas desde otras clases para
obtener su valor y además permiten
parámetros. Su sintaxis es la
siguiente:
Funciones de color
Las funciones de color son funciones
pre-definidas de Less CSS que
permiten alterar un color, para
hacerlo más claro, oscuro, saturado,
desaturado, cambiarle la tonalidad,
etc. Son una gran herramienta para
definir una paleta de colores sin estar
buscando códigos de color.
Las funciones de color son:
■ lighten para aclarar un color.
■ darken para oscurecerlo.
■ saturate para saturarlo, o
«aumentar el color».
■ desaturate para desaturarlo, o
«reducir el color».
■ fadein para resaltarlo quitándole
transparencia.
■ fadeout para disimularlo usando
transparencia.
■ fade para cambiar la
transparencia a 50%.
■ spin para cambiar el tono de color.
■ mix para mezclar dos colores.
VENTAJAS DE LESS CSS
■ CODIGO MAS ORGANIZADO:
Al estar usando pre-procesadores puedes hacer un uso mejorado de
la propiedad @import de CSS lo que te permite separar tu código en
varios archivos para mejorar la organización del código y que luego
al compilar a CSS todo se junte en un solo archivo minificado de
forma que el usuario solo baja un único CSS, pero al desarrollar uno
puede fácilmente tener varios archivos.
■ PROYECTOS MÁS FACILES DE MANTENER
Al poder separar tu código en múltiples archivos resulta más fácil
mantener tus proyectos ya que puedes aplicar alguna metodología y
volver tu código más modular e independiente, pudiendo modificarlo
sin problemas.
■ REUTILIZACIÓN DE CÓDIGO
El hecho de separar tu código en módulos independientes lo vuelve
más reutilizable evitándote escribir muchas veces estilos que se
repiten por todo el sitio.
DESVENTAJAS DE LESS CSS
■ DEBEN APRENDER A USARSE:
No es complicado el lenguaje que se utiliza ni aprender a usarlo, Sin
embargo el hecho de tener que aprenderlo hace que algunos
desarrolladores no les guste usarlos.
■ PUEDE LLEVAR A MALAS PRACTICAS
A pesar de permitirte hacer mejores estilos usar pre-procesadores
puede llevar a algunas malas prácticas como son la anidación de
estilos.
Puede parecer muy cómodo pero cuando tienes muchos estilos
anidados puede llevar a relentizar el renderizado del sitio web.
ELEMENTOS LESS

LESS Elements no es una extensa biblioteca de mezclas, solo lo esencial,

por ejemplo:
■ Fondo degradado: color es el color de fondo que se utilizará para los navegadores que no
admiten degradados.

■ Fondo degradado en escala de grises: Tres valores para establecer aquí. El primero proporciona
un color para usar como fondo para navegadores más antiguos que no admiten fondos
degradados
SEMANTICA

La sintaxis indentada de
Less es un metalenguaje
anidado, lo que es
válido en CSS es válido
en LESS con la misma
semántica.
Tipos de
estructuras

Variables
Tipos de
estructuras

MIXINS
Tipos de
estructuras

ANIDAMIENTOS
 Aplicaciones o usos:

■ Prácticamente el aplicativo y uso de Less se define en la utilización de sus distintas

características:
– Variables
– Mixins
– Operaciones
– Funciones
– Etc.
Ya que este lenguaje se utiliza de la mano con CSS es muy fácil empezar a trabajar
con ello, por ejemplo:
■ Trabajando con
Funciones:
EJEMPLO
Utilizando LESS para creación y
dar estilo a botones
GRACIAS