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
160
Nouveau modèle d’agence par Luc Chaissac
dbtalks
0
39
Design & Photographie, l'image comme élément de narration.
dbtalks
0
120
Life of an illustrator
dbtalks
0
81
Adrien Griveau : "Visual Design In-House"
dbtalks
0
220
Sketch IRL
dbtalks
1
640
Thinking Digital Typography
dbtalks
1
170
Onboarding : Refonte & Optimisation pour Azendoo
dbtalks
0
300
Designer avec le client
dbtalks
0
81
Other Decks in Design
See All in Design
Web 組版の課題とその解法
yamatoiizuka
0
110
プロダクトデザインは子育て/Product design is parenting
medley
0
310
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
231206_Book-launch-event_kato
hjmkth
2
1.2k
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
Wolf and the seven goatkids
_limex_
PRO
0
450
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
630
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.9k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.3k
Designing UIs without a UI designer
strongeron
0
120
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
Featured
See All Featured
It's Worth the Effort
3n
180
27k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Into the Great Unknown - MozCon
thekraken
10
990
Designing for humans not robots
tammielis
248
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Web Components: a chance to create the future
zenorocha
305
41k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Designing with Data
zakiwarfel
96
4.8k
Code Review Best Practice
trishagee
55
15k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
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 { }