Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Utiliser Sass efficacement
D&B Talks
March 31, 2014
Design
2
260
Utiliser Sass efficacement
Présentation de Damian Le Nouaille aux D&B Talks #6.
http://dbtalks.org/
D&B Talks
March 31, 2014
Tweet
Share
More Decks by D&B Talks
See All by D&B Talks
dbtalks
0
140
dbtalks
0
28
dbtalks
0
110
dbtalks
0
61
dbtalks
0
210
dbtalks
1
610
dbtalks
1
120
dbtalks
0
120
dbtalks
0
72
Other Decks in Design
See All in Design
masakioka
2
310
jonoda
1
230
mrloutoyou
0
150
jayster5678
0
480
artyx21
0
180
gillianhei
0
170
mannuamrit
0
370
nozomiarai
1
640
mashida
1
480
bread
0
140
kignato1
0
260
jjgallaher
PRO
0
360
Featured
See All Featured
geeforr
332
29k
scottboms
251
11k
cromwellryan
104
6.2k
jponch
103
5.1k
samanthasiow
56
6.4k
addyosmani
311
21k
matthewcrist
73
7.5k
mza
80
4.1k
aarron
257
36k
chriscoyier
683
180k
erikaheidi
14
4.3k
carmenhchung
31
1.5k
Transcript
Utiliser Sass Efficacement #dbtalks Par Damian Le Nouaille
Damian Le Nouaille @damln #dbtalks CTO à Geeksters @hellogeeksters
Qu’est ce qu’un préprocesseur ? #dbtalks
Un language pour les humains Qui vous veut du bien.
#dbtalks
Sass VS CSS #dbtalks
C’est simple C’est fait exprès. #dbtalks
Sass VS Less/Stylus #dbtalks
C’est compliqué C’est pas fait exprès. #dbtalks
#dbtalks
Vocabulaire #dbtalks
C’est du Ruby C’est fait exprès. #dbtalks
L ’Essentiel #dbtalks
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.
#dbtalks Sass CSS Variables
#dbtalks main.scss Dossiers Import
#dbtalks Sass CSS Nested
#dbtalks Sass CSS Mixins & Placeholders
#dbtalks Sass if/while/each
#dbtalks Sass CSS Opérations
#dbtalks Sass CSS Interpolation + @each
Installation #dbtalks
#dbtalks curl -L https://get.rvm.io | bash -s stable Ruby source
~/.bashrc gem install sass -v '3.3' Recharger Ruby Sass 3.3
Usage #dbtalks
#dbtalks sass main.scss:main.css Simple sass —watch main.scss:main.css Watch .sass-cache/
Alternatives #dbtalks
GUI Pour les designers. #dbtalks Grunt Pour les développeurs. Sass
Pour commencer.
#dbtalks Grunt Un outil qui vous veut du bien.
#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
#dbtalks Gruntfile.js
Futur #dbtalks
#dbtalks Takana (alpha) Pour les le temps réel. Libsass (beta)
Pour les gros projets. +
#dbtalks brew install sassc Installation Libsass (sassc) sassc main.scss >
main.css Compilation
#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
Takana #dbtalks
#dbtalks npm install -g takana ST2 > Install Package >
Takana takana start takana add /path/to/project Installation Takana (OSX)
#dbtalks onKeyDown() server-libsass connecté onNewCSS() 2 1 3
#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
@extend .Merci; #dbtalks .dbtalks { }