Similar a muchos lenguajes de programación, LESS también proporciona operaciones aritméticas como suma (+) , resta (-) , división (/) y multiplicación (*) . Estos operadores pueden hacer nuestro trabajo mucho más fácil cuando se usan correctamente. Es tan simple como hacer matemáticas básicas en las hojas de estilo y se puede aplicar a cualquier variable, número e incluso color. Usando estos operadores, nuestro trabajo se reducirá y se volverá realmente rápido.
Entendamos mejor esto con el siguiente ejemplo.
Ejemplo: en primer lugar, crearemos un archivo LESS (con extensión .less) con el siguiente código.
demo.less
@var : 10px;
.class1 {
font-size: @var * 8;
color: red;
}
.class2 {
font-size: @var + 20;
color: green;
}
Usando el siguiente comando, podemos compilar demo.less en CSS.
lessc demo.less demo.css
Salida CSS: Tenemos un archivo CSS equivalente al siguiente.
demo.less
.class1 {
font-size: 80px;
color: red;
}
.class2 {
font-size: 30px;
color: green;
}
Ahora vamos a crear un archivo HTML para probar este código CSS.
index.html
<!DOCTYPE html> <html> <head> <title>Operations in LESS</title> <link rel="stylesheet" type="text/css" href="demo.css" /> </head> <body> <p class="class1">GeeksforGeeks</p> <p class="class2">Welcome to GFG</p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parthmanchanda81 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA