9/01/2023 css 1m 48s 0 8647
Me.css v4 beta + sass Variables, Mixins and conditionals xxl optional xxxl optional Optional mixins Optional media query styles...
Tutorial de Less
16 de /junio06 de /2014
6m 47s
css
0 comentarios
1642
Less CSS es un lenguaje multiplataforma y de código abierto de hojas de estilo dinámico, se puede ejecutar en el lado del cliente con Javascript o en el lado del servidor con Node.js, a diferencia de CSS, LESS funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, mixins y operaciones aritmeticas.
El objetivo de LESS no es reemplazar CSS, LESS aporta mejoras avanzadas, compresión y productividad en nuestros trabajos de maquetación
Uso de LESS en local
Para usar LESS en local descarga LESS.js en este enlace y guardalo con el nombre por defecto “less-1.7.0.min.js” en la carpeta raiz del proyecto, en la cabecera de tu documento principal y enlaza las hojas de estilo de la siguiente forma
<head>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.7.0.min.js"></script>
</head>style.less será la hoja de estilos de nuestro proyecto y less-1.5.0.min.js será el script que enlazamos al archivo que hemos descargado anteriormente en la página oficial de LESS, la hoja de estilos debe añadirse antes que el script.
Utiliza Firefox para tus desarrollos en local con LESS, no todos los navegadores tienen soporte para LESS
Utiliza Firefox para tus desarrollos en local con LESS, no todos los navegadores tienen soporte para LESS
Uso de LESS en el lado servidor
Aconsejo el uso de LESS como una herramienta de desarrollo, no como una herramienta funcional para el lado cliente, con un compilador como Simpless, puedes convertir fácilmente un archivo con extensión .less a .css , es ideal para finalizar nuestro proyecto y evitar problemas de compatibilidad con navegadores.
Puedes descargar Simpless en este enlace.
Existen otros compiladores para Windows como Winless
Otra opción es LessPHP, una librería que compila LESSgenerarando estilos dinámicamente en tiempo real.
Variables
Uno de los problemas de CSS es que no podemos utilizar variables, en LESS podemos hacer uso de las variables de forma muy similar al uso de variables en otros lenguajes de programacion, estas nos permiten definir un valor en un solo lugar y usarlo en multiples partes de nuestro codigo.
Las variables en LESS se declaran con el símbolo @ seguido de nombre:valor.
Ejemplo:
Las variables en LESS se declaran con el símbolo @ seguido de nombre:valor.
Ejemplo:
@colorclaro:#FAFAFA;
h1 {
background-color: @colorclaro;
}
h2 {
color: @colorclaro;
}
h3 {
border-color: @colorclaro;
}Con la variable @colorclaro hemos asignado el mismo color a h1 en el fondo, a h2 en el texto y a h3 en el borde, podemos usar esta variable en cualquier parte del codigo y cuantas veces necesitemos, como en otros lenguajes de programación las variables que se declaran dentro de un selector son como variables locales y solo afectan al selector en el que han sido declaradas.
Ejemplo:
Ejemplo:
@colorazul: #184583;
h1 {
color: @colorazul;
}
h2 {
@colorazul: #3399CC;
color: @colorazul;
}En el ejemplo anterior h1 obtiene el color #184583 que ha sido declarado como si fuera una variable global, en el selector h2, este obtiene el color #3399CC, que es el valor que se ha declarado dentro de este selector (como si fuera una variable local). Muy importante, no se puede llamar a una variable declarada dentro de un selector (como si fuese local) desde otro selector.
Ejemplo
Ejemplo
h1 {
@colorazul: #3399CC;
color: @colorazul;
}
h2 {
color: @colorazul;
}El ejemplo anterior nos daría un error, el valor la propiedad de h2 no estaría definido.
Mixins
Los Mixins en LESS son como las funciones en otros lenguajes de programación, podemos generar un estilo y repetirlo en multiples selectores
Ejemplo:
Ejemplo:
.estilocajas() {
width: 100%;
background-color: #CCCCCC;
color: #333333;
border-radius:5px;
box-shadow: 1px 1px 1px #000000;
}
header {
.estilocajas;
height: 200px;
}
section {
.estilocajas;
height: 500px;
}
footer {
.estilocajas;
height: 100px;
}En el ejemplo anterior, header, section y footer obtendrian los mismos valores de ancho, fondo, color de texto, bordes redondeados y color de sombra, la altura se ha definido de forma diferente para cada selector
Con los mixins podemos ademas pasar parametros vacios o pasarles un valor al parametro por defecto.
Ejemplo con un parametro sin valor
Con los mixins podemos ademas pasar parametros vacios o pasarles un valor al parametro por defecto.
Ejemplo con un parametro sin valor
.bordesredondos(@valor) {
border-radius: @valor;
}
div {
.bordesredondos(5px);
}En el ejemplo anterior se ha creado un mixin y se le ha pasado un parametro vacio, cada vez que se le llame con un selector, tenemos que pasarle un valor.
Ejemplo con un valor por defecto
Ejemplo con un valor por defecto
.bordesredondos(@valor:5px) {
border-radius: @valor;
}
section {
.bordesredondos;
}
article {
.bordesredondos(10px);
}En el ejemplo anterior el selector section obtiene el valor por defecto(5px), ya que no se le ha pasado al parametro un valor, el selector article obtiene el valor que le hemos pasado al parametro(10px)
Reglas anidadas
En LESS puedes anidar selectores dentro de otros selectores, gracias a esto podemos crear hojas de herencia claras, en lugar de construir largos nombres de selector para especificar la herencia.
Ejemplo
Ejemplo
header {
h1 {
color: #184583;
}
h2 {
color: #CCCCCC;
}
}Este ejemplo muestra que solo las etiquetas h1 y h2 que se encuentran dentro de header, obtendran un color de texto #184583 y #CCCCCC respectivamente.
Un ejemplo mas complejo:
Un ejemplo mas complejo:
#header {
h1 {font-size: 24px; font-weight: bold;}
p {font-size: 12px;
a {text-decoration: none;
&:hover {color: #555555;}
}
}
}Funciones y operaciones
LESS tambien tiene operaciones que permiten sumar, restar, dividir y multiplicar los valores de las propiedades.
Ejemplo:
@borde: 1px;
@color: #11111;
section {
color: (@color * 3);
border-left: @borde;
border-right: (@borde * 2);
}
article {
color: (@color + #555555);
border-top: (@borde * 2);
border-bottom: (@borde * 3);
}Funciones de color
LESS tiene funciones para transformar colores, estos son transformados a HSL y manipulados a nivel de canal.
lighten(@color, 5%); // devuelve un color un 5% mas claro que @color
darken(@color, 5%); // devuelve un color un 5% mas oscuro que @color
saturate(@color, 5%); // devuelve un color un 5% más saturado que @color
desaturate(@color, 5%); // devuelve un color un 5% menos saturado que @color
fadein(@color, 5%); // devuelve un color un 5% menos transparente que @color
fadeout(@color, 5%); // devuelve un color un 5% más transparente que @color
spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color
spin(@color, -10); // devuelve un color con 10 grados de tono menor que @colorTambien podemos extraer información de un color:
hue(@color); // devuelve el canal 'hue' de @color
saturation(@color); // devuelve el canal 'saturation' de @color
lightness(@color); // devuelve el canal 'lightness' de @colorMás información
Web oficial de LESS http://lesscss.org/
Quizás te interese ...
3/01/2021 css 1m 40s 0 10318
Google Fonts se ha convertido es una herramienta de referencia para los diseñadores web, pero por cada fuente que agregamos a nuestro sitio...
27/07/2020 css 21m 46s 2 11002 5
me.css v4 beta ya disponible! https://didesweb.com/css/me-css-sass/ 35.4kb unminified Me.css es una librería css basada en Emmet muy...
17/06/2015 css 5m 49s 0 5647
CSS3 nos aporta entre otras novedades la propiedad gradient, que nos permite mostrar transiciones suaves entre dos o más colores. Antes,...
Valoraciones
Sé el primero en valorar