Architecture des fichiers Sass

Un fichier pour tous les gouverner

Solutions aux problèmes @import des fichiers Sass
Par David Leuliette le

Avec ses variables, fonctions et imports, Sass donne des supers pouvoirs au fichiers CSS. Plus précisément, il est possible d’importer et d’organiser ses fichiers SCSS de différentes manières. Mais tout ce pouvoir amène d’autres problèmes : la possibilité d’importer différents fichiers dans votre projet signifie que vous aller devoir gérer ses fichiers.

Super pouvoirs et Sass

Superman wallpaper par Jason Csizmadi

D’expérience cela peut provoquer de bonnes crises d’hystérie, mais avec l’habitude j’ai appris à contrecarrer ces différents problèmes et j’ai décidé de partager ces problèmes pour vous faire gagner du temps. Voici toutes les réponses aux question que vous vous posez pour organiser vos fichiers en Sass.

Définition d’un partial en Sass

Un partial est un fichier qui contient votre Sass. J’utilise des partials pour organiser mes projets : les boutons dans un fichier, la typographie dans un autre… Cette architecture permet de rapidement trouver et faire des changements dans des projets complexes.

Les partials ne sont pas de réels fichiers Sass car sass watch ne les convertira pas en CSS. Ils doivent êtres importés dans un fichier .scss

Sublime text search shortcut

(Avec sublime text cmd + t permet de faire une recherche rapide).

Sass peut importer uniquement les fichiers commençant par underscrore ?

Dans certains cas, vos fichiers Sass seront ignorés si vous les importez sans les préfixer avec _. Ceci dit, Sass n’est pas de la magie noire et ne convertira pas _button.scss en button.scss pour votre site. Vous pouvez seulement importer des fichiers commençant par _.

Pour résumer, comprendre comment architecturer vos fichiers Sass est aussi important que Sass lui-même. Voici la convention que je recommande :

  1. Renommer votre fichier CSS principal (application.css en application.scss par exemple)
  2. Ajouter votre code Sass dans ce fichier pour vous familiariser avec le langage
  3. Organiser vos fichiers en partials (comme _grid.scss) dès que votre fichier devient trop compliqué à maintenir / parcourir

Peut-on écrire du CSS dans des partials Sass ?

Absolument ! Cela ne dérange pas les fichiers Sass d’avoir du CSS à l’intérieur. La façon la plus rapide et la plus simple pour commencer à écrire du Sass est de prendre un fichier CSS existant, de changer son extension en .scss, et de commencer à écrire du code Sass. Par exemple vous pouvez commencer par renommer theme.css en _theme.scss et ajouter progressivement des variables et des fonctions au style existant.

Un bon point de départ est d’utiliser une convention de nommage pour les couleurs.

    $blue-steroid
    $blue-light
    $blue
    $blue-dark

Donc on ne doit pas vraiment écrire de Sass dans application.scss —ce fichier est est seulement utilisé pour importer des partials ?

Un noob du Sass

Techniquement vous pouvez écrire n’importe quoi dans application.scss, mais je recommande de séparer vos composants en partials, et de les importer ensuite dans application.scss pour conserver une bonne organisation depuis le départ.

En réalité je commence à coder mes différents partials en début de projet. Je n’ai jamais besoin d’écrire de code Sass dans application.scss, excepté les @import.

Et si j’utilise un framework comme Foundation ?

On peut se poser la question suivante : j’importe mes fichiers Sass avant ou après les import pour Foundation ?

Sass est très sensible à l’ordre des sélecteurs. Ceci dit, les déclaration les plus tardives dans vos fichiers .scss écrasent celles faites précédemment. C’est pour cette raison que vous devez toujours importer vos partials après Foundation pour personnaliser votre site. Par exemple :

    @import
      "foundation/components/block-grid",
      "foundation/components/buttons",
      "foundation/components/forms",
      "foundation/components/grid",
      "modules/my-typography",
      "modules/my-branding",
      "modules/my-buttons";

Dans ce cas modules/my-buttons écrasera les boutons de Foundation. Importer vos fichiers après ceux du framework signifie : "Oh grand magicien Sass, modifie moi les fichiers importés avant pour personnaliser mon site".

Est-ce que je peux dire à Sass d’importer tous les partials contenus dans un dossier ?

Non, pour les raisons exposées précédemment.

Il n’y a pas de moyen fiable de contrôler l’ordre dans lequel un dossier entier sera importé, vous devez donc importer chaque partial vous-même…

Et je vous voie venir à 100 km les apprentis hackers avec :

    @import "stylesheets/*"

Je vous souhaite bon courage dans la gestion de vos dépendances de variables, et dans l’optimisation de vos feuilles de style.

Comme vous l’avez vu dans la précédente question, vous pouvez importer une série de fichiers avec seulement une seule déclaration @import en séparant chaque fichier par une virgule. Remarquez aussi que Sass ne nécessite pas d’écrire .scss ou _ dans les noms de fichiers. Ce préprocesseur est assez intelligent pour reconnaitre ce que vous voulez faire.

Peut- on utiliser @import pour embarquer des fichier .css ?

Mauvaise nouvelle : Sass ne peut importer que des fichiers .scss ou .sass

Bonne nouvelle : .scss est simplement du .css avec une orthographe différente. Comme mentionné dans la première question, vous pouvez transformer vos fichiers .css en .scss simplement en changeant l’extension de fichier.

Si tous mes partials sont dans un dossier, quelles sont les formules de magie noire pour compiler ces fichiers dans une seule feuille de style ?

La syntaxe @import utilisée en SCSS est complètement différente d’une ligne de commande. La compilation s’éxécute avec une formule magique depuis un terminal, mais ces formules dépendent de votre environement d’éxécution.

Par exemple :

  • Sass : sass watch
  • Compass : compass watch
  • Grunt : grunt
  • Middleman : middleman server