Tuto : Comment fonctionne Sass?

Démarrer avec Sass

 

Comme nous avons pu le voir précédemment à travers le tuto “ Comment installer Sass ?”, Sass 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

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/tuto-comment-fonctionne-sass/" data-token="4902205c3d401b610c04cf12b8230d5a"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div><div id="wpforms-9980-field_22-container" class="wpforms-field wpforms-field-checkbox" data-field-id="22"><ul id="wpforms-9980-field_22"><li class="choice-1 depth-1 wpforms-selected"><input type="checkbox" id="wpforms-9980-field_22_1" name="wpforms[fields][22][]" value="Recevoir les newsletters personnalisées" checked='checked'><label class="wpforms-field-label-inline" for="wpforms-9980-field_22_1">Recevoir les newsletters personnalisées</label></li></ul></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="4"><input type="hidden" name="wpforms[post_id]" value="5502"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->