El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Less (Leaner Style Sheets) és un preprocessador CSS que permet utilitzar variables, funcions, mixins i altres funcionalitats avançades per escriure CSS de manera més eficient i mantenible. En aquest tema, explorarem els conceptes bàsics de Less, incloent-hi la seva sintaxi i les seves característiques principals.

Introducció a Less

Què és Less?

Less és un llenguatge de fulls d'estil que s'estén a CSS. Permet escriure CSS de manera més dinàmica i reutilitzable. Less es compila en CSS estàndard abans de ser utilitzat en un lloc web.

Instal·lació de Less

Per utilitzar Less, primer cal instal·lar-lo. Hi ha diverses maneres d'instal·lar Less, incloent-hi l'ús de Node.js i npm (Node Package Manager).

npm install -g less

Compilació de Less

Un cop instal·lat, pots compilar fitxers Less a CSS utilitzant la línia de comandes:

lessc styles.less styles.css

Variables en Less

Les variables en Less permeten emmagatzemar valors que es poden reutilitzar al llarg del full d'estil.

Exemple de Variables

@primary-color: #4CAF50;
@font-size: 16px;

body {
  color: @primary-color;
  font-size: @font-size;
}

En aquest exemple, @primary-color i @font-size són variables que es poden reutilitzar en qualsevol lloc del full d'estil.

Mixins en Less

Els mixins permeten reutilitzar blocs de codi CSS. Poden acceptar arguments, cosa que els fa molt flexibles.

Exemple de Mixins

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box {
  .border-radius(10px);
  background: #f0f0f0;
}

En aquest exemple, el mixin .border-radius defineix un conjunt de propietats CSS que es poden aplicar a qualsevol selector.

Anidament en Less

Less permet anidar selectors dins d'altres selectors, cosa que reflecteix la jerarquia HTML i fa que el codi sigui més llegible.

Exemple d'Anidament

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;
    color: @primary-color;
  }
}

En aquest exemple, els selectors ul, li i a estan anidats dins del selector nav, reflectint l'estructura HTML.

Funcions en Less

Less inclou diverses funcions integrades que permeten manipular valors de colors, unitats i altres propietats CSS.

Exemple de Funcions

@base-color: #4D926F;

.shade(@color, @percent) {
  color: lighten(@color, @percent);
  background-color: darken(@color, @percent);
}

.box {
  .shade(@base-color, 20%);
}

En aquest exemple, la funció lighten aclareix un color i la funció darken l'enfosqueix.

Exercicis Pràctics

Exercici 1: Crear Variables i Utilitzar-les

Defineix una variable per al color de fons i una altra per al color del text.
Aplica aquestes variables a un element div.

@background-color: #282c34;
@text-color: #61dafb;

div {
  background-color: @background-color;
  color: @text-color;
  padding: 20px;
  text-align: center;
}

Exercici 2: Utilitzar Mixins

Defineix un mixin per a aplicar ombres a un element.
Aplica aquest mixin a un element button.

.box-shadow(@x, @y, @blur, @color) {
  -webkit-box-shadow: @x @y @blur @color;
     -moz-box-shadow: @x @y @blur @color;
          box-shadow: @x @y @blur @color;
}

button {
  .box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.3));
  padding: 10px 20px;
  border: none;
  background-color: @primary-color;
  color: white;
  cursor: pointer;
}

Conclusió

En aquesta secció, hem après els conceptes bàsics de Less, incloent-hi com utilitzar variables, mixins, anidament i funcions. Aquests conceptes permeten escriure CSS de manera més eficient i mantenible. En el proper mòdul, explorarem els frameworks de CSS, començant per una introducció general i després aprofundint en l'ús de Bootstrap.

Conceptes Bàsics de Less

Introducció a Less

Què és Less?

Instal·lació de Less

Compilació de Less

Variables en Less

Exemple de Variables

Mixins en Less

Exemple de Mixins

Anidament en Less

Exemple d'Anidament

Funcions en Less

Exemple de Funcions

Exercicis Pràctics

Exercici 1: Crear Variables i Utilitzar-les

Exercici 2: Utilitzar Mixins

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu