Commencer avec sass

##Variables Si vous avez une valeur que vous utilisez souvent, vous pouvez la stocker dans une variable. Vous pouvez l’utiliser pour définir des combinaisons de couleurs, par exemple. Vous n’auriez qu’à définir votre schéma une seule fois, puis vous pourriez l’utiliser dans vos feuilles de style.

Pour définir une variable, vous devez préfixer son nom avec le symbole $. (Comme vous le feriez en PHP.)

Vous pouvez stocker n’importe quelle valeur de propriété CSS valide dans une variable. Comme les couleurs, les polices ou les URL.

Exemple 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Importation

Supposons le scénario suivant : Vous avez deux feuilles de style : _variables.scss et layout.scss. Logiquement, vous conservez toutes vos variables dans votre feuille de style variable mais souhaitez y accéder depuis votre feuille de style de mise en page.

REMARQUE : Vous remarquerez peut-être que la feuille de style des variables comporte un trait de soulignement (’_’) avant son nom. C’est parce que c’est un partiel - ce qui signifie qu’il va être importé.

sass-lang.com dit ce qui suit à propos des partiels : Vous pouvez créer des fichiers Sass partiels contenant de petits extraits de CSS que vous pouvez inclure dans d’autres fichiers Sass. C’est un excellent moyen de modulariser votre CSS et de faciliter la maintenance. […] Le trait de soulignement permet à Sass de savoir que le fichier n’est qu’un fichier partiel et qu’il ne doit pas être généré dans un fichier CSS. Les partiels Sass sont utilisés avec la directive @import.

Les variables SCSS sont idéales pour ce scénario. Supposons que votre _variables.scss ressemble à ceci :

$primary-color: #333;

Vous pouvez l’importer avec @import puis le nom de la feuille de style entre guillemets. Votre feuille de style de mise en page peut maintenant ressembler à ceci (notez qu’il n’y a pas de trait de soulignement ou d’extension de fichier dans l’importation) :

@import 'variables';
body {
  color: $primary-color;
}

Cela produirait quelque chose comme ce qui suit :

body {
  color: #333;
}

Commentaires

SASS prend en charge deux types de commentaires :

  • Commentaires en ligne - Ceux-ci ne s’étendent que sur une ligne et sont généralement utilisés pour décrire une variable ou un bloc. La syntaxe est la suivante : // Votre commentaire ici (vous le faites précéder d’une double barre oblique (//) et le reste de la ligne est ignoré par l’analyseur.

  • Commentaires multilignes - Ils s’étendent sur plusieurs lignes et sont généralement utilisés pour afficher un copyright ou une licence en haut d’un document. Vous pouvez ouvrir un bloc de commentaire multiligne avec /* et vous pouvez fermer un bloc de commentaire multiligne avec */. Voici un exemple :

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/

Imbrication

layout.scss

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

production

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

Installer

Lorsqu’il s’agit d’utiliser SASS, il existe plusieurs façons de configurer votre espace de travail. Certaines personnes préfèrent utiliser des outils de ligne de commande (probablement Linux) et d’autres préfèrent utiliser des applications GUI. Je couvrirai les deux.

Outils de ligne de commande

La page ‘Installer SASS’ sur sass-lang.com couvre assez bien cela. Vous pouvez utiliser SASS avec Ruby (qui peut être installé à partir d’un gestionnaire de packages Linux ou vous pouvez [télécharger le programme d’installation][1] sous Windows). macOS est livré avec Ruby préinstallé.

Une fois que vous avez installé Ruby, vous devez installer SASS (dans certains cas, sudo peut ne pas être nécessaire) :

sudo gem install sass

Enfin, vous pouvez vérifier que vous avez installé SASS avec sass -v.

Applications graphiques

Bien qu’il existe un certain nombre d’applications GUI que vous pouvez utiliser, je recommande [Scout-App][2]. Il construit et compresse automatiquement vos fichiers CSS pour vous, sur fichier et prend en charge macOS, Windows et Linux.

[1] : http://rubyinstaller.org/ [2] : http://scout-app.io/

SCSS contre Sass →