Pro Yearly is on sale from $80 to $50! »

Utiliser Sass efficacement

2047741c55e56804e4d2ee28a072b78a?s=47 D&B Talks
March 31, 2014

Utiliser Sass efficacement

Présentation de Damian Le Nouaille aux D&B Talks #6.

http://dbtalks.org/

2047741c55e56804e4d2ee28a072b78a?s=128

D&B Talks

March 31, 2014
Tweet

Transcript

  1. Utiliser Sass Efficacement #dbtalks Par Damian Le Nouaille

  2. Damian Le Nouaille @damln #dbtalks CTO à Geeksters @hellogeeksters

  3. Qu’est ce qu’un préprocesseur ? #dbtalks

  4. Un language pour les humains Qui vous veut du bien.

    #dbtalks
  5. Sass VS CSS #dbtalks

  6. C’est simple C’est fait exprès. #dbtalks

  7. Sass VS Less/Stylus #dbtalks

  8. C’est compliqué C’est pas fait exprès. #dbtalks

  9. #dbtalks

  10. Vocabulaire #dbtalks

  11. C’est du Ruby C’est fait exprès. #dbtalks

  12. L ’Essentiel #dbtalks

  13. Variables Pour communiquer. #dbtalks Import Pour organiser. Nested Pour encapsuler.

    Mixins & Placeholders Pour factoriser. if/while/each Pour jouer aux devs. Opérations Pour faire des maths. Interpolation Pour générer. SassScript Pour faire les fous.
  14. #dbtalks Sass CSS Variables

  15. #dbtalks main.scss Dossiers Import

  16. #dbtalks Sass CSS Nested

  17. #dbtalks Sass CSS Mixins & Placeholders

  18. #dbtalks Sass if/while/each

  19. #dbtalks Sass CSS Opérations

  20. #dbtalks Sass CSS Interpolation + @each

  21. Installation #dbtalks

  22. #dbtalks curl -L https://get.rvm.io | bash -s stable Ruby source

    ~/.bashrc gem install sass -v '3.3' Recharger Ruby Sass 3.3
  23. Usage #dbtalks

  24. #dbtalks sass main.scss:main.css Simple sass —watch main.scss:main.css Watch .sass-cache/

  25. Alternatives #dbtalks

  26. GUI Pour les designers. #dbtalks Grunt Pour les développeurs. Sass

    Pour commencer.
  27. #dbtalks Grunt Un outil qui vous veut du bien.

  28. #dbtalks npm update npm -g npm install -g grunt-cli npm

    install --save-dev grunt npm install --save-dev grunt-contrib-watch npm install --save-dev grunt-sass Installation Grunt + Plugins
  29. #dbtalks Gruntfile.js

  30. Futur #dbtalks

  31. #dbtalks Takana (alpha) Pour les le temps réel. Libsass (beta)

    Pour les gros projets. +
  32. #dbtalks brew install sassc Installation Libsass (sassc) sassc main.scss >

    main.css Compilation
  33. #dbtalks time sassc main.scss > main.css Time is money. time

    sass main.scss:main.css 0.30s 2.22s main.scss == 10 000 lignes
  34. Takana #dbtalks

  35. #dbtalks npm install -g takana ST2 > Install Package >

    Takana takana start takana add /path/to/project Installation Takana (OSX)
  36. #dbtalks onKeyDown() server-libsass connecté onNewCSS() 2 1 3

  37. #dbtalks Liens Pour continuer. http://sass-lang.com/ http://libsass.org/ http://www.sache.in/ http://css-tricks.com/sass-style-guide/ http://thesassway.com/ https://www.codeschool.com/courses/assembling-sass

    http://sassmeister.com/ http://gruntjs.com/ https://github.com/mechio/takana
  38. @extend .Merci; #dbtalks .dbtalks  { }