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

HOME

Sass (Syntactically Awesome Stylesheets) és un preprocessador CSS que afegeix funcionalitats avançades al CSS, com ara variables, mixins, funcions, i molt més. Aquest mòdul t'introduirà als conceptes bàsics de Sass i com pots utilitzar-lo per millorar el teu flux de treball en CSS.

Què és Sass?

Sass és un llenguatge de preprocesament que s'utilitza per escriure CSS de manera més eficient i mantenible. Permet utilitzar característiques com variables, mixins, i anidament, que no són possibles amb CSS estàndard.

Avantatges de Sass:

Variables: Permeten emmagatzemar valors CSS en una variable reutilitzable.
Anidament: Permet escriure selectors CSS de manera més clara i jeràrquica.
Mixins: Permeten reutilitzar blocs de codi CSS.
Partials i Imports: Permeten dividir el codi CSS en múltiples fitxers.
Herència: Permet compartir un conjunt de propietats CSS entre diferents selectors.

Instal·lació de Sass

Utilitzant Node.js i npm:

Instal·la Node.js: Si no tens Node.js instal·lat, descarrega'l i instal·la'l des de nodejs.org.
Instal·la Sass: Obre la terminal i executa la següent comanda:
```
npm install -g sass
```

Utilitzant un compilador en línia:

Si no vols instal·lar Sass localment, pots utilitzar un compilador en línia com SassMeister.

Sintaxi de Sass

Sass té dues sintaxis principals: Sass (indented syntax) i SCSS (Sassy CSS). En aquest curs, ens centrarem en SCSS, ja que és més similar al CSS estàndard.

Exemple de 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;
  }
}

Variables

Les variables en Sass permeten emmagatzemar valors que es poden reutilitzar en tot el full d'estils.

Exemple de Variables:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

Anidament

L'anidament permet escriure selectors CSS de manera més clara i jeràrquica.

Exemple d'Anidament:

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

  li { display: inline-block; }

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

Mixins

Els mixins permeten reutilitzar blocs de codi CSS. Pots definir un mixin amb @mixin i incloure'l amb @include.

Exemple de Mixins:

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

.box { @include border-radius(10px); }

Partials i Imports

Els partials permeten dividir el codi CSS en múltiples fitxers. Els fitxers partials comencen amb un guió baix (_).

Exemple de Partials i Imports:

_reset.scss:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

styles.scss:

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #f0f0f0;
}

Herència

La herència permet compartir un conjunt de propietats CSS entre diferents selectors amb @extend.

Exemple d'Herència:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Exercicis Pràctics

Exercici 1: Crear Variables

Defineix una variable $primary-color amb el valor #3498db.
Defineix una variable $font-stack amb el valor Arial, sans-serif.
Aplica aquestes variables a un element body.

Solució:

$primary-color: #3498db;
$font-stack: Arial, sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

Exercici 2: Utilitzar Mixins

Defineix un mixin box-shadow que accepti un paràmetre $shadow.
Aplica aquest mixin a un element .card amb el valor 0 4px 8px rgba(0, 0, 0, 0.1).

Solució:

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
      -ms-box-shadow: $shadow;
          box-shadow: $shadow;
}

.card {
  @include box-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

Conclusió

En aquest tema, hem après els conceptes bàsics de Sass, incloent-hi variables, anidament, mixins, partials, imports i herència. Aquests conceptes et permetran escriure CSS de manera més eficient i mantenible. En el següent tema, explorarem els conceptes bàsics de Less, un altre preprocessador CSS popular.

Conceptes Bàsics de Sass

Què és Sass?

Avantatges de Sass:

Instal·lació de Sass

Utilitzant Node.js i npm:

Utilitzant un compilador en línia:

Sintaxi de Sass

Exemple de SCSS:

Variables

Exemple de Variables:

Anidament

Exemple d'Anidament:

Mixins

Exemple de Mixins:

Partials i Imports

Exemple de Partials i Imports:

Herència

Exemple d'Herència:

Exercicis Pràctics

Exercici 1: Crear Variables

Solució:

Exercici 2: Utilitzar Mixins

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