sass Tutoriel
Démarrer avec sass

Remarques

Versions

Installer

En ce qui concerne l'utilisation de SASS, il existe plusieurs manières de configurer votre espace de travail. Certaines personnes préfèrent utiliser des outils de ligne de commande (probablement des utilisateurs Linux) et d'autres préfèrent utiliser des applications graphiques. Je vais couvrir les deux.

Outils de ligne de commande

La page 'Install SASS' de sass-lang.com couvre très bien. Vous pouvez utiliser SASS avec Ruby (qui peut être installé à partir d'un gestionnaire de paquets Linux ou vous pouvez télécharger le programme d'installation 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 GUI

Bien que vous puissiez utiliser un certain nombre d'applications GUI, je vous recommande Scout-App . Il construit et compresse automatiquement vos fichiers CSS pour vous, en sauvegarde de fichiers et supporte macOS, Windows et Linux.

Les variables

Si vous utilisez souvent une valeur, vous pouvez la stocker dans une variable. Vous pouvez par exemple l'utiliser pour définir des schémas de couleurs. Il vous suffira de définir votre schéma une seule fois et vous pourrez ensuite l'utiliser dans toutes 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 toute 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;
}

Importer

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 vous souhaitez y accéder depuis votre feuille de style de mise en page.

Remarque: vous pouvez remarquer que la feuille de style de variables a un trait de soulignement («_») avant son nom. C'est parce que c'est partiel - ce qui signifie qu'il va être importé.

sass-lang.com dit ceci à 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 conviennent parfaitement à 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’ya pas de soulignement ni d’extension de fichier dans l’importation):

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

Cela produirait quelque chose comme ceci:

body {
  color: #333;
}

Nidification

layout.scss

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

sortie

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

commentaires

SASS prend en charge deux types de commentaires:

• Commentaires en ligne - Ils ne couvrent qu'une seule ligne et sont généralement utilisés pour décrire une variable ou un bloc. La syntaxe est la suivante: // Your comment here (vous l’ajoutez avec une double barre oblique ( // ) et le reste de la ligne est ignoré par l’analyseur).

• Commentaires multilignes - Ils couvrent 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 commentaires multiligne avec /* et fermer un bloc de commentaires multiligne avec */ . Voici un exemple:

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