Utiliser Sass efficacement

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