SASS

L'agence Web Outsourcify est expert SASS, un pré-processor pour CSS

SASS

Sassest un méta-langage dont le but est d’être traité en CSS. Les noms de fichiers sont en fait *.scss et peuvent être compilés par un outil comme Gulpou Webpackdans un fichier CSS minifié qui peut être lu par tout navigateur.

Sass Il permet de diviser le code CSS en différents fichiers, d’organiser une structure propre et donne plusieurs outils ainsi qu’une syntaxe plus élégante et avancée. Fondamentalement, il donne plus de puissance que le CSS brut, mais il n’étend pas le standard CSS lui-même car c’est le CSS qui sera généré à partir des fichiers.scss.

CSS orienté objet

Nous utilisons les fichiers SCSS depuis des années et la façon dont nous écrivons ces fichiers a évolué et continue depuis. Aujourd’hui, nous préférons un paradigme de codage orienté objet, ce qui signifie essentiellement que nous pensons à la structure HTML en termes d’objets ou de sections (et nous essayons de les réutiliser autant que possible), donc vous avez des « objets » standard en HTML et ensuite des classes CSS qui leur sont appliquées et d’autres classes CSS qui peuvent être ajoutées afin de modifier légèrement leur comportement.

L’objectif est de comprendre clairement en lisant le code HTML et ses classes CSS comment il est censé être affiché et de déterminer très rapidement où le CSS est défini (dans quel dossier de la structure de code SCSS).

Cela nous permet d’avoir une base de fichiers SCSS que nous pouvons réutiliser dans la plupart des projets, ils contiennent :

  • Resets: notre propre reset très simple qui se trouve en haut de Normalize.css, il permet de normaliser les styles entre les navigateurs pour s’assurer qu’ils se comportent tous de la même façon.
  • La configuration des projets : principales variables SCSS, couleurs, polices, tailles
    etc
  • Outils: requêtes média, clearfix, classes réactives
    etc
  • Eléments de base : conception des éléments HTML.
  • Types d’objets de base : wrapper, grille, listes, blocs,
    boutons, liens
    etc
  • Composants: en-tête, pied de page, sections, bannières, etc.

scss