Démarrer avec Sass

NetDevices vous a présenté précédemment le tuto “ Comment installer Sass ?”. Cette dernière est une extension de CSS3 qui  a pour particularité de permettre la simplification de l’écriture de code CSS grâce à de nouvelles règles rassemblées autour de 3 grandes innovations : les variables, Nesting, les Mixins, l’héritage.

Ce tutoriel va vous permettre d’apprendre comment utiliser SaaS. Nous allons ainsi vous montrer comment compiler et commencer à coder de manière à générer plus intelligemment et efficacement vos feuilles de style CSS et ainsi améliorer votre « Workflow » dans tous vos projets web pro ou personnels. 

CSS avec SASS – Introduction (Débuter avec SASS)

 

Retour au terminal

Taper les commandes suivante pour lui indiquer dans quel dossier il va générer le fichier de style css :
sass –watch

1. on va lui demander de regarder dans le dossier “sass”
   sass –watch sass
2. on va lui demander de générer dans le dossier css
   sass –watch sass:css

Il nous indique sur le terminal qu’il cherche des changement dans le dossier “sass”.

Remarque : Il a automatiquement généré un fichier “style.css” et “style.css.map” dans le dossier “css”.

Comment fonctionne sass ?

Ouvrir le fichier “sass”. On va commencer à mettre du style dans la balise “body”

Remarque : On ne met ni d’accolade, ni de point virgule pour terminer :

body

           background-color:white

Remarque : Saas va vous permettre de surveiller les changements que vous faîtes sur le fichier scss afin qu’il le compile automatiquement en css. Une simple commande suffit :

sass –watch scss:css (2 tirets devant watch)

Ex : Dans le fichier sass on ne met pas de « ; » ni de « }{ « le compilateur s’en chargera ! Il suffit donc d’enregistrer son fichier puis d’aller dans le fichier css voir le résultat.

fichier : scss

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

 font: 100% $font-stack

 color: $primary-color
—————————————-
fichier css

body {

 font: 100% Helvetica, sans-serif;

 color: #333; }

/*# sourceMappingURL=style.css.map */

Sass basics

Source : http://sass-lang.com/guide

Variables

Pensez aux variables comme moyen de stocker des informations que vous souhaitez réutiliser dans votre feuille de style.

$font-stack:    Helvetica, sans-serif;

Nesting

Lors de l’écriture en HTML, vous avez probablement remarqué qu’il existe une hiérarchie claire et ancrée, que l’on ne retrouve pas avec le CSS.

Sass vous permettra d’imbriquer vos sélecteurs CSS d’une manière qui suit la même hiérarchie visuelle de votre HTML.

Partial

Vous pouvez créer des fichiers Sass partiels qui contiennent de petits extraits de CSS que vous pouvez inclure dans d’autres fichiers Sass. C’est une excellente façon de modulariser votre CSS et d’aider à garder les choses plus faciles à entretenir.

Un partiel est tout simplement un fichier Sass nommé avec un trait de soulignement de premier plan. Vous pouvez le nommer : _partial.scss. 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 partitions Sass sont utilisées avec la @importdirective.  

Mixins

Certaines choses dans CSS sont un peu fastidieuses à écrire, en particulier avec CSS3 et les nombreux préfixes de fournisseurs qui existent.

Un mixin vous permet de créer des groupes de déclarations CSS que vous souhaitez réutiliser sur votre site. 

Ex : border-radius  

Importer

CSS possède une option d’importation qui vous permet de diviser votre CSS en parties plus petites et plus maintenables. Le seul inconvénient est que chaque fois que vous utilisez @importCSS, il crée une autre requête HTTP.

Sass s’appuie sur le CSS actuel @import mais au lieu d’exiger une requête HTTP, Sass prendra le fichier que vous voulez importer et le combiner avec le fichier de destination afin que vous puissiez utiliser un seul fichier CSS sur le navigateur Web.

Découvrez dans un nouveau tutoriel comment utiliser les variables et les Mixins