LESS significa Hojas de Estilo Más Esbeltas . Es una extensión de lenguaje compatible con versiones anteriores para CSS. Una de sus características es que te permite usar variables en la hoja de estilo. Las variables se pueden usar para almacenar valores CSS que se pueden reutilizar. Esto hace que sea más fácil para el usuario al permitirle definir valores de uso común en una sola ubicación.
Definición de una variable: Las variables en Less se representan con un signo de arroba (@). Podemos asignar un valor usando dos puntos (:).
CSS
@color-primary: #009900; @background-dark: #272822; @background-light: #fff;
Usando una variable como valores a las propiedades:
CSS
.card {
color: @lt-gray;
background: @background-light;
font-size: @font-2;
}
Usando una variable como parámetro para funciones:
CSS
@link-color: #428bca; @link-color-hover: darken(@link-color, 10%);
Los siguientes ejemplos demuestran el uso de Less variables.
Ejemplo 1:
gfg.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <h1>Welcome to GeeksforGeeks</h1> <div class="odd">Paragraph 1</div> <div class="even">Paragraph 2</div> <div class="odd">Paragraph 3</div> <div class="even">Paragraph 4</div> <div class="odd">Paragraph 5</div> </body> </html>
style.less
@green-color: #25C75C;
@black-color: #000;
@background-dark: #272822;
@background-light: #ebebeb;
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: @green-color;
}
div {
padding: 10px;
}
.odd {
color: @black-color;
background-color: @background-light;
}
.even {
color: @green-color;
background-color: @background-dark;
}
Nombre de archivo style.css que obtenemos después de compilar previamente style.less
style.css
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: #25C75C;
}
div {
padding: 10px;
}
.odd {
color: #000;
background-color: #ebebeb;
}
.even {
color: #25C75C;
background-color: #272822;
}
Producción:
Ejemplo 2:
gfg.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <h1>Welcome to GeeksforGeeks</h1> <div> <p><a class="link" href="#"> Link 1</a> will take you to Page 1. </p> </div> </body> </html>
style.less
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
@green-color: #25C75C;
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: @green-color;
}
div {
padding: 10px;
}
.link {
color: @link-color;
text-decoration: none;
}
.link:hover {
color: @link-color-hover;
cursor: pointer;
}
Nombre de archivo style.css que obtenemos después de compilar previamente style.less
style.css
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: #25C75C;
}
div {
padding: 10px;
}
.link {
color: #428bca;
text-decoration: none;
}
.link:hover {
color: #3071a9;
cursor: pointer;
}
Producción:
sin flotar
Publicación traducida automáticamente
Artículo escrito por anushkachauhan1503 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA