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

Apprenez à mieux organiser vos feuilles de styles avec Sass

a marqué ce sujet comme résolu.
Auteur du sujet

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

Édité par Matouche

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+2 -0

Cette réponse a aidé l’auteur du sujet

Très agréable à lire !

Quelques remarques :

  • Un schéma pour le préprocesseur pourrait être judicieux.
  • Il faut, à mon avis, expliquer le processus de production, pour qu'on puisse insérer Sass dans un contexte. C'est-à-dire, on écrit nos fichiers .scss, les compile pour en obtenir en .css, qui seront lus par le navigateur. Ce dernier n'a alors aucun lien avec Sass (on pourrait croire qu'il s'agit d'un truc genre Bootstrap).
  • Dans "Pourquoi Sass ?", tu pourrais montrer un fichier .css et un .scss histoire qu'on se rende compte globalement de ce que c'est et de l'intérêt.
  • J'aurais parlé de la compilation dans "C'est quoi Sass ?". Là, on ne comprend pas pourquoi c'est dans la partie "L'imbrication".
  • Je n'ai pas lu en détails la suite, mais ça semble faire un peu liste, même si bien rédigée. Peut-être devrais-tu prendre un exemple de gros fichier .css et le simplifier avec Sass progressivement.

Merci !

Édité par Vayel

+0 -0
Auteur du sujet

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 !

Édité par Matouche

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+0 -0

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 :o ). 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. ^^

Édité par Vayel

+0 -0
Auteur du sujet

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

Vayel

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 !

Édité par Matouche

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+0 -0
Auteur du sujet

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.

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+2 -0

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.

Assez des salamis, je passe au jambon — Je fais un carnage si ce car nage car je nage, moi, Karnaj ! — Le comble pour un professeur de mathématique ? Mourir dans l’exercice de ses fonctions.

+1 -0
Auteur du sujet

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.

Édité par Matouche

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+3 -0
Auteur du 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.


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

La grosse réécriture arrive tout doucement à son terme (wouhou ! :ninja: ), 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.

Édité par Matouche

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+2 -0

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. :)

Édité par rezemika

"Les accidents dans un système doivent se produire, mais il n’est pas obligatoire qu’ils produisent pour vous et moi." Laurence Gonzales - Deep Survival

+3 -0
Auteur du 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 !

Édité par Matouche

Étudiant à l’HEAJ de Namur. Envie de découvrir Sass ? #JeSuisArius

+1 -0
Ce sujet est verrouillé.