Utiliser Sass efficacement

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

http://dbtalks.org/

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  { }