Booste ton workflow #1 : Apprendre SASS et Compass

On te recommande aussi ...

  • Super article Vincent, j’ai adoré !
    A peine commencé et le « tu ne CSSras pas » m’a achevé pour la journée !
    Petite précision pour la console windows tu peux aussi drag&drop un chemin de dossier/fichier

    PS: Pas de conseil séduction ?

    • maximaLzdnb

      J’avoue que je suis plutôt fier de la punchline
      Merci à toi pour la console Windows, je l’ajoute dans l’article !

      Et non désolé, pas de conseil séduction, mais tu peux demander à ton collègue Quentin Haensler de t’en donner, puisqu’il écrit un livre sur Tinder et qu’il dénigre mes conseils

      • Petite subtilité pour la console windows : c’est le chemin dans la barre d’adresse qu’il faut drag&drop et non le dossier

  • Michel Edighoffer

    Bravo ! j’ai découvert quelques fonctionnalités que je ne connaissais pas !

    • maximaLzdnb

      Ahhh ! Ça me fait plaisir ça Tu parles des Sprites ? Je m’en suis servi récemment sur un projet client et ça marche vraiment du tonnerre

      • Michel Edighoffer

        Entre autre oui !
        Je vais l’utiliser sur mes prochains projets (TMTCeyyy).

  • Jibéo

    Sass et Compass sont devenus incontournables pour tout intégrateur web qui souhaite gagner du temps et automatiser au mieux ses développements. Bon article, plutôt généraliste, mais qui saura éclairer les novices sur les avantages des ses nouveaux outils

    • maximaLzdnb

      Merci pour ton retour Jibéo ! L’article et cette série se veut plutôt généraliste, pour offrir à tous la chance de découvrir un large panel d’outils pour que chacun compose son propre workflow comme il l’entend, ce que je cherche à éviter c’est d’enfermer les lecteurs dans MON workflow qui n’est le meilleur que pour moi !

  • Etienne

    Bonjour, la commande « compass create » ne fonctionne pas pour moi ? Je travail sur mac !

  • Mickaelmgd

    Bonjour tout le monde voilà jme lance aussi sur le sujet depuis quelques temps et j’avoue ne pas comprendre l’utilité de l’installation via ruby gem etc alors qu’il y a des outils qui automatisent tout….

    Y’a un intérêt ?

    • maximaLzdnb

      Une meilleure emprise sur ton environnement de travail. Les outils automatisés choisissent des paramètres par défaut pour toi. Si un jour tu réalises qu’un des paramètres bloque ton travail, il te suffit de le changer manuellement, de refaire une install, bref, en gros tu gères ton truc de A à Z toi même. C’est la raison pour laquelle j’ai également suivis un tutoriel de Grafikart pour avoir son propre serveur Apache et MYSQL sur mon macbook pro, j’en avais assez de dépendre de MAMP et autres, et maintenant je suis libre comme l’air

  • Pingback: Booste ton workflow #2 : Flexbox - Blog du MMI()

  • Reno HVQ!

    Merci pour l’article…
    J’ai trouvé ce site qui traite de Sass aussi si cela peut-être complémentaire ?
    http://more-sass-stressless.esy.es/

  • Reno HVQ!

    Merci pour l’article…
    J’ai trouvé ce site qui traite de Sass aussi si cela peut-être complémentaire ?
    http://more-sass-stressless.esy.es/

  • Yaaas

    Il y a quelques oublis.. notamment l’installation de la gem Sass après l’installation de Ruby je crois.. enfin, j’ai du faire comme ça à l’instant, merci de m’avoir donner envie de m’y mettre!

    • maximaLzdnb

      Hello Yaaas Pourtant c’est bel et bien dans l’article, tu m’as foutu le doute :p Point 4 pour Windows et point 1 pour Mac OSX! Je suis content que tu t’y sois mis, ça vaut vraiment le coup alors fonce

  • Pingback: Customise ton thème WordPress façon Pinterest - Blog du MMI()

  • Pingback: Freebies - podistorek | Pearltrees()

  • Pingback: Idées cadeaux : La liste au Père Noël du MMI - Blog du MMI()

  • kevin le buhan

    J’ai de gros problème à l’installation,

    « gem install sass » OK

    le chemin de mon fichier style.scss OK

    Ensuite je met « sass–watch scss:css » dans mon fichier style.scss?
    ou dans ruby?

    J’ai essayé beaucoup de manip’ rien à faire rien n’apparaît dans mon dossier CSS

    Merci d’avance pour vos réponse

  • Leslie Infographie

    Salut Vincent

    Depuis le temps que je voulais me lancer dans ces histoires de variables…
    J’ai donc suivi le tuto à la lettre
    J’ai galéré pour les histoire de commande
    Mais une fois fait j’ai une erreur :
    « error no such file or directory @rb_sysopen – scss »
    Et effectivement il me copie rien dans mon dossier css, mais il me met un fichier dans le dossier scss…
    Je me suis plantée où?

    Une autre question, je code habituellement sous dreamweaver, mais il connait pas les fichiers scss, le mieux serait d’utiliser quoi?

    Merci

    • Leslie Infographie

      Bon à force de bidouille j’ai réussi à mettre en route compass….

      • maximaLzdnb

        Mince, désolé Leslie je suis passé à côté de ton commentaire hier. Je suis content que tu aies trouvé la source de ton problème, et oui compass c’est totalement génial ! Bon courage !

        • Leslie Infographie

          Salut Vincent
          Ca fait 2 jours que je cherche désespérément à trouver une solution pour coder en scss sous Dreamweaver ou Notepad++, parce que sans les codes couleurs et l’écriture intuitive, je vais perdre un temps fou… Tu travailles avec quoi?
          Merci

          • maximaLzdnb

            Hello Leslie, désolé de ma réponse encore tardive.

            Personnellement j’utilise l’excellent Sublime Text, et j’utilise des extensions pour ce dernier pour obtenir la syntaxe de SASS (ou LESS ou n’importe quelle syntaxe en gros). J’en parle dans un autre article sur le Workflow ici : https://blogdummi.fr/developpement/outils-gratuits-workflow-ideal/ et j’explique comment installer tout ça !

            Bon courage

          • Leslie Infographie

            Salut Vincent
            Je reviens vers toi complètement déprimée!
            Je suis super convaincu de l’utilité de sass et compass, je commence un gros projet et je voudrais utiliser compass vu toutes les infos que j’ai trouvé!
            Ruby fonction, il m’a bien généré tous les fichiers, il compile bien sass, mais impossible de charger la librairie compass, @import « compass »; j’ai un message d’erreur :
            Errno::ENOENT: No such file or directory @ rb_sysopen – C:/Users/Leslie/…/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/general/_hacks.scssc20160303-6660-1c519i6″;
            Je t’embête avec ça car je n’ai pas trouvé de forum français sur compass pour poser ma question.
            Merci

          • Leslie Infographie

            A force de bidouille, j’ai remarqué que si je supprimais la première ligne de mon config.rb
            require ‘compass/import-once/activate’
            je n’avais plus de message d’erreur et la librairie semble fonctionner.
            Mais j’ai des Deprecation warning qui apparaissent…

  • MicMac

    Bonjour,
    Tout d’abord merci pour ces différents articles et liens très compréhensible pour un simple designer comme moi (sans réelle expérience de programmation).
    Je me lance dans la refonte de mon site et j’ai choisis d’utiliser le SASS.
    Ruby, Compass et Koala fonctionnent bien mais il y a une ombre au tableau :(.
    Lorsque je compile mon fichier .scss le fichier CSS généré contient une ligne de débuggage (je suppose) avant chaque règle :
    @media
    -sass-debug-info{filename{font-family:file://C:/MAMP/htdocs/RACINE_DU_SITE/DOSSIER_SASS/NOM_FICHIER.scss}line{font-family:000318}} <– La valeur de "line{font-family:000318}" change à chaque nouvelle
    règle.

    Auriez-vous une solution??

    Merci de toute l'aide que vous pourrez m'apporter, j'ai hâte de m'y mettre ;D

  • MicMac

    … heu désolé le « @media-sass-debug-info » est le résultat de l’erreur, le « code » de l’erreur est :
    —uncaughtException —
    Error:ENOENT, no such file or directory
    ‘CHEMIN D’ACCES AU FICHIER CSS’
    at Object.fs.openSync(fs.is:427:18)

    J’espère que ça pourra vous aider (moi pas ;p)

  • MicMac

    désolé, les « @media-sass-debug-info » générés ne sont que le résulta de l’erreur :p
    le « code » de l’erreur est :
    — UncaughtException —
    Error:ENOENT, no such file or directory
    ‘CHEMIN D’ACCES AU FICHIER CSS’
    at Object.fs.openSync(fs.is:427:18)

    Merci

  • Pingback: SASS (Syntactically Awesome Style Sheets) – Générateur de CSS – sysnet()

  • Pingback: Sass | Pearltrees()

  • Pingback: Html/css | Pearltrees()