Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Utiliser Sass efficacement
Search
D&B Talks
March 31, 2014
Design
2
270
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
Quels choix stratégiques en matière d’UX et d’UI Design pour les grands projets architecturaux à but culturels ? Retour d'expérience avec le site de La Cité du Vin by Olivier Allevi
dbtalks
0
170
Nouveau modèle d’agence par Luc Chaissac
dbtalks
0
45
Design & Photographie, l'image comme élément de narration.
dbtalks
0
120
Life of an illustrator
dbtalks
0
86
Adrien Griveau : "Visual Design In-House"
dbtalks
0
230
Sketch IRL
dbtalks
1
680
Thinking Digital Typography
dbtalks
1
180
Onboarding : Refonte & Optimisation pour Azendoo
dbtalks
0
330
Designer avec le client
dbtalks
0
88
Other Decks in Design
See All in Design
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
今日から意識できるアクセシビリティ
fumiko
0
250
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
440
問いの変遷
iflection
0
160
How to get a Tiger to Tulsa
mcduckyart
0
110
UXデザインはなぜ定着しないのか?
designstudiopartners
0
750
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.3k
PF_濵村ひろみ_202503
maru_design78
0
180
NAHO SHIMONO_Portfolio2025
nahohphp
0
890
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
560
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Statistics for Hackers
jakevdp
799
220k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
It's Worth the Effort
3n
185
28k
BBQ
matthewcrist
89
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Scaling GitHub
holman
460
140k
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 { }