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
46
Design & Photographie, l'image comme élément de narration.
dbtalks
0
130
Life of an illustrator
dbtalks
0
88
Adrien Griveau : "Visual Design In-House"
dbtalks
0
230
Sketch IRL
dbtalks
1
690
Thinking Digital Typography
dbtalks
1
190
Onboarding : Refonte & Optimisation pour Azendoo
dbtalks
0
340
Designer avec le client
dbtalks
0
89
Other Decks in Design
See All in Design
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
1.8k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
100
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
310
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
190
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
600
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
170
kintone Style Book
kintone
1
460
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
Featured
See All Featured
A better future with KSS
kneath
239
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Unsuck your backbone
ammeep
671
58k
A Tale of Four Properties
chriscoyier
161
23k
Raft: Consensus for Rubyists
vanstee
140
7.2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to Ace a Technical Interview
jacobian
280
24k
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 { }