Premiers pas et premiers fichiers Sass

Article 2 sur 9 de la série: Comprendre et utiliser Sass

• Travailler sa maquette avec Sass et Susy

  Afin de mieux comprendre la mise en œuvre de tout ce que nous avons vu jusqu’à présent, y compris l’utilisation de Sass, nous allons déployer un véritable flux de travail en s’appuyant sur la mise en place d’un site.

• Premiers pas et premiers fichiers Sass

  Après avoir vu tous ces concepts qui gravitent autour de Sass, il est important de mettre à plat et d’établir nos premiers fichiers et nos premières lignes de code afin de mettre tout cela en activité.

• Comment répartir ses fichiers partials sous Sass

  SassScript va bien au-delà de l’utilisation simple de variables ou de mixin, nous allons explorer la mise en place d’un modèle assez complet pour concevoir notre développement de site ou d’application.

• Paramétrer Sass avec Compass

  Bien que la librairie Compass ne soit plus maintenue, nous allons explorer une approche qui l’utilise et nous permet de continuer à en profiter sans compromettre nos productions.

• Installer et préparer Sass pour la production

  Travailler sous Ruby nous apporte une véritable panoplie d’outils que nous avons sous la souris. Voyons comment installer ces différentes facettes qui peuvent nous être très utiles.

• Déployer Sass de manière efficace

  Depuis la démocratisation et l’utilisation des préprocesseurs, différents concepts, principalement basés sur la programmation orientée objet, ont émergés et nous permettent d’aborder Sass d’une manière très modulaire.

• Sass – La compilation et les outils disponibles

  Bien que Ruby soit une approche très ouverte et évolutive, il existe différentes façons de compiler Sass dans CSS, et chaune peut présenter ses intérêts et ses avantages.

• Qu’est ce que Sass – Introduction et présentation

  Qu’est-ce qu’un préprocesseur et ce qu’est Sass? Cet article présente les concepts de base et définis ce qu’on peut attendre d’une telle technologie.

• Comprendre et utiliser Sass

  Cette série ne couvre pas la syntaxe de Sass, mais examine comment utiliser Sass et des concepts qui nous permettent d’exploiter au mieux les possibilités offertes par Sass.

Deux cas de figure sont rencontrés lorsque l’on doit travailler sur un projet de sites ou d’applications web. Soit le site existe déjà et nous devons alors nous adapter à l’architecture utilisée et mise en place, soit nous créons le site et donc nous démarrons depuis une page blanche avec toute liberté d’architecture.

Dans un cas comme dans l’autre, tout ce que nous avons vu au travers des chapitres et articles précédents vont pouvoir être appliqués. Il faudra simplement préparer l’architecture pour les sites déjà en place afin de pouvoir exploiter les capacités de Sass.

Régler finement le fichier de configuration

Le fichier config.rb peut être affiné en définissant et en ajustant un certain nombre de propriétés. Toutes ces propriétés sont en relation avec l’environnement Ruby et vous pouvez en analyser l’ensemble en vous rapprochant de la page Ruby-based Configuration Reference.

Un réglage presqu’incontournable, va être de définir le mode de travail du projet, sommes-nous en développement ou en production ? Pour cela, il suffit de placer la variable environnement sur la valeur development (valeur par défaut) et de la basculer le moment voulu en production.

Attention cette variable s’initialise bien dans le fichier config.rb mis en place pour paramétrer compass, et il faut relancer l’instruction watch pour en obtenir la prise en compte.

environment = :development; # :production

Bien entendu, il est possible d’aller bien plus, et si vous le souhaitez, nous pourrions ouvrir une nouvelle série à ce sujet. En attendant, n’hésitez pas de vous rapprocher de l’article – Sass-based Configuration Options.

Mise en place d’utilitaires de débogage

Au tout début des CSS, lors de la bascule de ce qu’on appelait encore les sites tableless, Christopher Schmitt proposait d’utiliser des bordures rouges, adjointes d’espaces, sur les balises <table>, afin de pouvoir rapidement les distinguer, et les localiser, dans le rendu des pages.

Nous pouvons également avec Sass utiliser une page Sass contenant un certain nombre d’utilitaires comme le propose Ire Aderinokun dans son article Linting HTML using CSS.

On peut compléter cette approche avec de nombreux autres outils qui nous aideront à déboguer, ou à améliorer les contenus. Et là encore on peut employer Sass pour lier ces outils uniquement en mode développement.

Ensuite, grâce à cette variable, nous pouvons directement filtrer au sein des fichiers importés, et notamment le fichier _sass-debug.scss, l’ensemble des déclarations qui seront utiles, ou pas.

@if (compass-env() == development) {
  // ensemble des déclarations
}

Dans le même esprit, pensez à modifier le paramètre du style de sortie, directement depuis le fichier config.rb, en adaptant la valeur en fonction de la variable d’environnement.

output_style = (environment == :production) ? :compressed : :expanded

Ceci réduira la modification lors du passage en production à une seule étape, modifier la valeur de l’environnement sur :production.

environment = :production

Définir les variables principales

Toujours au niveau des variables, il est également le moment, si besoin, de paramétrer l’ensemble des valeurs par défaut de certains helpers ou mixins provenant de librairies externes comme compass, bourbon, neat, pour ne citer qu’elles… à titre d’exemple, voici quelques valeurs dédiées aux mixins border-radius et box-shadow de compass,

$default-border-radius : 4px;
$default-box-shadow-color : #656565;
$default-box-shadow-h-offset : 3px;
$default-box-shadow-v-offset : 3px;
$default-box-shadow-blur : 5px;
$default-box-shadow-spread : 0px;

Mettre en place une charte de couleurs

Avant de commencer à taper dans le scss, il est recommandé de remplir l’ensemble des valeurs par défaut, et diverses variables notamment de couleur qui seront utilisées. Il faut s’aider de la charte graphique et du nuancier fournis par le designer.

Deux sites incontournables du côté des couleurs, rgbto et Adobe Color CC, et sans oublier le nuancier Copic Ciao.

Bien que blanc, noir et niveaux de gris puissent être standards, il est quand même bien de les définir au travers de variables afin de pouvoir les affiner si besoin était, comme les éclaircir ou les foncer en fonction des besoins.

Lire à ce sujet l’excellent article de Jake Albaught, Using Sass functions to access variable maps et une de ses sources d’inspiration l’article de Tom Davies – Friendlier colour names with Sass maps.

Pour définir l’ensemble des valeurs de couleurs nécessaires à la création du site ou de l’application web, nous pouvons en fonction de notre approche avoir recours, soit à l’utilisation de variables indépendantes, en employant si besoin un préfixe en fonction de la catégorie

$coul-texte : rgb(63, 81, 98);
$coul-liens : rgb(0,89,178);
$coul-blanc : rgba(255, 255, 255, 0.75);
$coul-noir  : rgba(0, 0, 0, 0.6);

Soit en les regroupant au travers d’une map, qui peut bien sûr, contenir d’autres maps, afin de pouvoir classer chaque type de valeurs par catégories. Attention, cependant, à ne pas rendre la lecture des maps imbriquées trop verbeuse.

$coul:    (
  texte: rgb(63, 81, 98),
  liens: rgb(0,89,178),
  blanc: rgba(255, 255, 255, 0.75),
  noir : rgba(0, 0, 0, 0.6)
);

Afin de récupérer, ou de travailler avec les valeurs d’une map, il suffit ensuite d’user d’une des nombreuses fonctions disponibles, par exemple ;

body {
  color:map-get($coul,texte);
}

Préparer et paramétrer fontes

En récupérant les données depuis la charte graphique, il est possible de préparer l’utilisation des diverses fontes qui seront nécessaires. Le plus important va être la préparation des sub-settings.

Pour cela, une fois s’être assuré des droits d’exploitation des diverses typos et fontes, il suffit de se rendre sur le Webfont Generator proposé par Font Squirrel où depuis l’envoi d’une fonte en *.otf, ou en *.ttf, il est possible de récupérer l’ensemble du paquetage nécessaire.

N’hésitez surtout pas à employer le mode expert qui vous donne accès à l’ensemble des paramétrages fins, pour optimiser au mieux l’ensemble du jeu.

Une fois les diverses fontes récupérées, il faut les regrouper par polices en les plaçant dans un dossier distinct du dossier font de l’arborescence du site. Attention à donner un nom au dossier qui soit web safe, et qu’il s’agisse bien du dossier fonts décrit dans le fichier config.rb.

Jonathan Neal a mis en place un mixin font-face assez intéressant pour écrire et compléter les font-face pour nous. Il est mieux adapté que celui proposé par Compass. Ajoutons-le et utilisons-le pour la police qui se décline en quatre fontes, extrabold, bold, regular et light.

Tout d’abord, nous devons importer les libs, puis inclure toutes les polices nécessaires et passer des arguments pour affiner chaque paramètre. Voici l’approche Sass

@import "vendors/mixin";
@include font-face( "opensans_extrabold", fonts/opensans_extrabold_french, 400, normal, eot ttf woff svg);
@include font-face( "opensans_bold", fonts/opensans_bold_french, 400, normal, eot ttf woff svg);
@include font-face( "opensans_regular", fonts/opensans_regular_french, 400, normal, eot ttf woff svg); 
@include font-face( "opensans_light", fonts/opensans_light_french, 400, normal, eot ttf woff svg);

Et le CSS obtenu une fois compilé. (une seule instance est présentée, afin de minimiser l’espace occupé)

@font-face    {
  font-family: "opensans_extrabold";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/opensans_extrabold_french.eot?") format("eot"), 
       url("fonts/opensans_extrabold_french.ttf") format("truetype"),
       url("fonts/opensans_extrabold_french.woff") format("woff"),
       url("fonts/opensans_extrabold_french.svg#opensans_extrabold") format("svg");
}

Il faut ensuite placer ces quatres fontes dans des jeux de fontes (font-stack) qui seront utilisés par les CSS. Ajoutons au passage une monotype présente sur les systèmes utilisateurs.

$font-extrabold : "opensans_extrabold", sans-serif;
$font-bold : "opensans_bold", sans-serif;
$font-regular : "opensans_regular", sans-serif;
$font-light: "opensans_light", sans-serif;
$font-teletype : "Courier New",Courier, "Lucida Sans Typewriter",monospace;

Utiliser un vertical rythm

Si on utilise Compass et Normalize, deux possibilités s’offrent à nous quant à la mise en place et la gestion d’un vertical rhythm. Si vous n’avez jamais entendu parler de vertical rhythm n’hésitez pas à vous rapprocher de l’article de Shelly Wilson – 4 Simple Steps to Vertical Rhythm.

Avec Compass

Compass propose un vertical rhythm qui est intéressant autant l’utiliser, on peut rapidement le mettre en place, d’une part en important les librairies nécessaires et d’autre part en activant une typo de base, un interlignage et en invoquant le mixin ad hoc. N’hésitez pas également à en découvrir les suntilité en vous rapprochant de l’article de Zell Liew – Compass Vertical Rhythms.

On peut en profiter à l’occasion à également faire appel au mixin plaçant les listes en horizontal, prête à recevoir des barres de menus.

Donc coté fichier principal styles.scss

@import "compass/typography/vertical_rhythm";
@import "compass/typography/lists/horizontal-list";

Et côté _sass-variables.scss ;

$base-font-size: 16px;
$base-line-height: 24px;
@include establish-baseline;

Avec Normalize

De son côté Normalize intègre également une gestion du vertical rhythm et il faut prendre soin de ne pas en dénaturer les possibilités, voir à ce sujet l’article de Jonathan Lehman – Groove to a vertical Rhythm.

Quoiqu’il en soit que vous utilisiez l’un ou l’autre pensez à le paramètrer et le mettre en place à ce stade de la préparation.

Adapter l’architecture des sites existants

Quel que soit le type de travail, il suffit dans un premier temps de préparer l’architecture de fichiers vides sur laquelle nous souhaitons nous appuyer.

Ensuite, et dans le cas d’un projet de reprise de site, contenant un, ou plusieurs, fichiers CSS déjà en activité, il suffit de renommer le, ou les, fichier *.css existant(s) en *.scss, et de faire précéder leur nom de fichier par un underscore.

fichier.css -> _fichier.scss

Il faut, par ailleurs, ne pas oublier d’ajouter leur importation à la liste des fichiers importés au niveau du fichier styles.scss principal.

@import ‘fichier’ ;

Il est important de noter, qu’en utilisation de scss, nous pourrions tout aussi bien importer les fichiers directement au format *.css, mais cela nous empêcherez d’éventuellement user de syntaxe Scss en leur sein.

La présence du underscore va simplement indiquer à Sass de traiter ces fichiers comme des _partials.