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

HOME

Els preprocessadors de CSS són eines que permeten escriure codi CSS més eficient i mantenible. Aquests preprocessadors afegeixen funcionalitats addicionals al CSS estàndard, com ara variables, mixins, funcions i altres característiques que faciliten la creació i gestió d'estils complexos.

Què és un Preprocessador de CSS?

Un preprocessador de CSS és un programa que permet escriure CSS en una sintaxi especial que després es compila en CSS estàndard. Els preprocessadors més populars són Sass, Less i Stylus.

Avantatges d'Utilitzar Preprocessadors de CSS

Variables: Permeten definir valors reutilitzables per colors, fonts, mides, etc.
Nidificació: Facilita l'escriptura de CSS jeràrquic, reflectint l'estructura HTML.
Mixins: Permeten reutilitzar blocs de codi CSS.
Herència: Facilita l'extensió d'estils d'un selector a un altre.
Funcions i Operacions: Permeten realitzar càlculs i manipular valors.

Com Funciona un Preprocessador de CSS?

El procés general per utilitzar un preprocessador de CSS és el següent:

Escriure el codi en la sintaxi del preprocessador: Utilitzant les característiques avançades que ofereix.
Compilar el codi: Convertir el codi del preprocessador en CSS estàndard.
Incloure el CSS compilat en el projecte: Utilitzar el CSS resultant en el teu lloc web.

Exemples de Preprocessadors de CSS

Sass (Syntactically Awesome Stylesheets)

Sass és un dels preprocessadors més populars i ofereix dues sintaxis: la sintaxi original (indented syntax) i SCSS (Sassy CSS), que és una extensió de la sintaxi CSS.

Exemple de codi Sass (SCSS):

$primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: $primary-color;
}

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Less

Less és un altre preprocessador popular que ofereix funcionalitats similars a Sass.

Exemple de codi Less:

@primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: @primary-color;
}

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Instal·lació i Configuració

Instal·lació de Sass

Per instal·lar Sass, necessites tenir Node.js instal·lat. Pots instal·lar Sass utilitzant npm (Node Package Manager):

npm install -g sass

Compilació de Sass

Per compilar un fitxer .scss a .css, utilitza la següent comanda:

sass input.scss output.css

Instal·lació de Less

Per instal·lar Less, també necessites Node.js. Pots instal·lar Less utilitzant npm:

npm install -g less

Compilació de Less

Per compilar un fitxer .less a .css, utilitza la següent comanda:

lessc input.less output.css

Exercici Pràctic

Objectiu

Crear un fitxer .scss que utilitzi variables, nidificació i mixins, i compilar-lo a CSS.

Passos

Crea un fitxer styles.scss amb el següent contingut:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

body {
  font: 100% $font-stack;
  color: $primary-color;

  header {
    background: $secondary-color;
    @include border-radius(10px);
    padding: 20px;
    text-align: center;

    h1 {
      margin: 0;
      color: white;
    }
  }
}

Compila el fitxer styles.scss a styles.css utilitzant la comanda:

sass styles.scss styles.css

Inclou el fitxer styles.css en un document HTML i verifica que els estils s'apliquen correctament.

Solució

El fitxer styles.css resultant hauria de semblar-se a això:

body {
  font: 100% Helvetica, sans-serif;
  color: #3498db;
}

body header {
  background: #2ecc71;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
  padding: 20px;
  text-align: center;
}

body header h1 {
  margin: 0;
  color: white;
}

Conclusió

Els preprocessadors de CSS com Sass i Less ofereixen eines poderoses per escriure codi CSS més eficient i mantenible. Amb característiques com variables, mixins i nidificació, els preprocessadors faciliten la gestió d'estils complexos i milloren la productivitat dels desenvolupadors. En els següents mòduls, explorarem més a fons les funcionalitats específiques de Sass i Less.

Introducció als Preprocessadors de CSS

Què és un Preprocessador de CSS?

Avantatges d'Utilitzar Preprocessadors de CSS

Com Funciona un Preprocessador de CSS?

Exemples de Preprocessadors de CSS

Sass (Syntactically Awesome Stylesheets)

Less

Instal·lació i Configuració

Instal·lació de Sass

Compilació de Sass

Instal·lació de Less

Compilació de Less

Exercici Pràctic

Objectiu

Passos

Solució

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