Des feuilles de style stylées grâce à Sass et Compass

Bonjour à tous,

J'ai commencé (il y a 2 mois, 2 semaines) la rédaction d'un tutoriel dont l'intitulé est Des feuilles de style stylées grâce à Sass et Compass.

J'aimerai obtenir un maximum de retour sur celui-ci, sur le fond ainsi que sur la forme, afin de proposer en validation un texte de qualité.

Si vous êtes interessé, cliquez ci-dessous

Merci d'avance pour votre aide

Bonjour !

La beta du tutoriel a été mise à jour.

A Vayel : j'ai essayé de prendre en compte tes trois premières remarques. Je pense que rajouter l'extrait qui explique la compilation alourdirait trop le premier chapitre, qui est avant tout une présentation. En plus, le chapitre sur l'imbrication est assez court. Au passage, pour plus de cohérence, j'ai ajouté l'imbrication de media-queries dans ce deuxième chapitre.

L'idée d'un gros fichier CSS comme fil rouge est très bonne, mais cela implique de revoir en profondeur l'ensemble des chapitres existants. Si j'ai le temps, j’essaierai.

Merci pour ton retour !

C'est mieux ! Mais tu devrais étoffer la partie "Votre premier projet" et y inclure la compilation, que le lecteur ait quelque chose de concret. =)

Je suis déçu de ne rien voir à propos des .sass. J'utilise cette syntaxe, et j'en suis franchement content (la clarté des fichiers ). Il serait possible de rajouter un petit descriptif dans le chapitre Introduction ? Si tu as besoin d'aide, MP moi .

Aussi, une allusion aux logiciels de compilation SASS, type Koala (je sais, Koala ne compile pas que du SASS) dans la partie 'Installons Sass' serait cool.

Tout bien réfléchi, je pense que le plus judicieux serait de baser tout le tutoriel sur un exemple. Concrètement, tu écris un bon gros code en CSS, tu nous fais constater à quel point c'est long et complexe et tu le simplifies et l'optimises progressivement avec Sass. Comme ça, on a un exemple d'application de chaque fonctionnalité, un exemple de mise en pratique et un exemple de conversion CSS/SCSS, utile si on reprend le code de quelqu'un.

Pour ce qui est de la forme, tu pourrais utiliser un personnage fictif, tout fier de son bon gros code CSS mais souhaitant le simplifier. Tu lui conseilles alors Sass et l'accompagnes dans sa quête :

• Oulala ! Que ton code est complexe ! Tu devrais utiliser Sass !
• Sass ? C'est quoi çass ?
• Sass c'est un préprocesseur… (indépendant du server, schémas, courtes comparaisons de codes CSS/SCSS). Et au fait, il y a aussi Less, mais on va le lesser dans son coin, même s'il a une bonne doc, un bon…
• Génial ! Mais comment je fais ?!
• Déjà, tu l'installes et compiles tout premier projet. Puis…

Et puis Compass, mais vu que j'ignore ce que c'est…

Edit : j'avais pas vu que tu avais édité ton message pour réagir à mes remarques. Désolé si ça fait insistant.

Mais pas du tout, au contraire, ça veut dire que ce tuto t'intéresses ! Je vais sans doute reprendre le tout avec un exemple comme fil rouge. Cela demande de restructurer chaque chapitre, qui aurait en gros cette forme :

• Une grande notion : qu'est-ce qu'un mixin ?
• un savoir-faire: créer un mixin
  • mini-exemple de code juste pour comprendre, pas forcément très concret
• un savoir-faire: inclure un mixin
  • mini-exemple(s)
• un savoir-faire: utiliser les arguments
  • mini-exemple(s)
• etc.
• Une mise en pratique, pour appliquer la notion (ici, l'utilisation des mixins) à une feuille de style qui sert de fil rouge à tout le tutoriel

La mise en pratique aurait en gros la forme du mini-TP que je propose dans le dernier chapitre sur les conditions. Si cela fait des chapitres trop long (j'essaie de le prendre en compte, il faut être clair, mais il ne faut pas décourager le lecteur), je peut toujours diviser en deux (ex: un chapitre sur les boucles, un autre sur les conditions).

A Forever : Je prévoyais de faire une annexe sur la syntaxe indentée (.sass), mais je t'avoue que je n'y connais pas grand chose parce que je ne m'en sers pas. Cependant, si tu as le temps d'écrire quelque chose là-dessus (ce sera sans doute mieux que moi) je peux t'ajouter comme auteur.

Pour Koala, pareil, je ne m'en sers pas donc c'est dur d'en parler (j'avais essayé Scout, sans grand succès).

Merci à vous deux !

Edit: Et je pense que je devrais mettre plus d'images pour illustrer certains principes (@extend, mixins). Bref, du pain sur la planche !

Oui tu as raison, ça m'évite les mini-exemples qui peuvent être redondants avec la feuille de style. La mise en scène, pourquoi pas, ça peut rendre la lecture plus fluide…

Des nouvelles du front ! Le tutoriel n'est pas mort, loin de là. Je suis en train de le réécrire complètement, pour qu'il soit centré sur un exemple fil rouge, le site d'une entreprise de limonade.

Les chapitres sont plus courts, beaucoup plus aérés, j'ai ajouté des illustrations et schémas… Actuellement, trois chapitres sont terminés :

• Sass, un préprocesseur CSS (allégé et illustré)
• Prise en main (nouveau chapitre qui regroupe installation, création d'un projet et compilation)
• L'imbrication (allégé et désormais centré sur l'exemple fil rouge)

Je suis en train de réécrire le chapitre sur les variables (qui sera lui aussi un peu allégé pour se concentrer sur la pratique). A la fin de chaque chapitre, en plus du paragraphe En résumé, je pense ajouter un petit exercice à propos du fil rouge. Ainsi, le premier exercice consiste à finir le travail d'imbrication sur l'exemple. La correction est disponible dans le repo GitHub.

Je pense mettre à jour la bêta lorsque j'aurais fini de réécrire les chapitres suivants :

• Variables (work in progress)
• @import (séparé de @extend)
• Les mixins 1/2 (les bases)
• Les mixins 2/2 (arguments nommés, listes d'arguments et @content)
• @extend

Les autres chapitres seront mis à jour par la suite, et formeront une deuxième partie Sass avancé (avec un chapitre sur map, peut-être).

Bref, du pain sur la planche, merci à tous ceux qui m'ont conseillés.

Je suis tombé dessus il y a 30 minutes… et j'ai tout lu. J'ai toujours voulu apprendre à utiliser LESS ou Sass mais j'ai jamais eu le temps, et là je lis tout d'un coup. C'est vraiment agréable à lire.

Bonne continuation.

Bon courage et hâte de lire cette refonte du tuto. T’as pas l’air de faire les choses à moitié!

J’ai fait d’assez gros progrès ces derniers temps, voici donc une petite mise à jour :

• [Done] Variables
• [Done] @import (séparé de @extend)
• [Done] Les mixins 1/2 (les bases)
• [Done] Les mixins 2/2 (arguments nommés, listes d’arguments et @content)
• @extend (en cours)
• [Done] Fonctions
• Boucles (2/3 fait)
• Conditions (2/3 fait)

J’ai encore à refaire deux trois illus aussi, je pense mettre à jour la bêta d’ici une dizaine de jours

Au passage, je ne pense plus parler de Compass, ce dernier étant déprécié depuis quelques temps, je me dis qu’à la place ce serait intéressant de parler de Bourbon et Susy 2.

C’est normal que le tuto ne soit plus accessible (404) ?

Salut,

La bêta est encore accessible à cette adresse.
Le lien du premier message ne doit plus être d’actualité j’imagine.

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

La nouvelle version remaniée du cours est en beta !

La grosse réécriture arrive tout doucement à son terme (wouhou ! ), avec un cours qui possède désormais un fil rouge (la page d’accueil du site d’une entreprise de limonade) qui me permet d’introduire la plupart des principes de Sass.

Le cours est désormais divisé en deux parties (Bases & Notions avancées). Il y a d’avantage de sections "Bonnes pratiques", inspirées de ce que j’ai lu ça et là sur des sites anglophones. Il y a aussi plus de mini-TPs pour mettre en pratique les notions. Enfin, il y a un peu plus d’illus pour alléger la lecture.

Je viens de tomber dessus un peu par hasard grâce à la page d’aide aux auteurs, et c’est bigrement intéressant. Merci pour ton travail !

Malheureusement, puisque je ne connaissais pas Sass, je ne saurais relever les éventuelles erreurs, et donc t’apporter un retour vraiment utile, mais je t’encourage à continuer.

Merci !

C’est vachement bien, en plus il me semble qu’il manque de ressources en français qui traitent en profondeur le sujet.

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Voilà, on arrive à une version finalisée de ce tuto (enfin !). J’ai remis les sections sur "!default" et "@function" dans leurs chapitres respectifs, et j’ai surtout ajouté un chapitre conclusif qui évoque les dernières avancées autour de Sass (le type map, Neat & autres libs, DartSass vite fait). C’est plus un chapitre de survol qu’autre chose, mais l’idée est de donner envie d’aller voir plus loin. Je pense laisser le tuto en beta quelques jours, avant de l’envoyer finalement à la validation.

EDIT du 4 sept : Envoyé à la validation ! Bon courage à artragis et Abdelazer !