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
330
Designer avec le client
dbtalks
0
89
Other Decks in Design
See All in Design
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
7 Core Values of Round-L
wired888
0
2.2k
Findyのプロデチームの 歩みとこれから
satty9556
0
300
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.5k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
630
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
役立つシステムを作るためのAI活用
kanzaki
0
110
アクセシビリティに取り組むメリット
magi1125
2
270
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
220
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
730
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
360
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Facilitating Awesome Meetings
lara
56
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Context Engineering - Making Every Token Count
addyosmani
6
240
The World Runs on Bad Software
bkeepers
PRO
72
11k
Navigating Team Friction
lara
190
15k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Visualization
eitanlees
149
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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 { }