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
690
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
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
160
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
320
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
440
佐藤千晶|ポートフォリオ
chimi_chia
0
110
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
500
CursorでAI活用のナレッジベースを構築する
kanzaki
0
650
デザイナー向けフライル説明資料
toshiblues
0
110
freee + Product Design FY25Q4
freee
4
16k
mento Design Team Portfolio
mento0fficial
1
620
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
320
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Done Done
chrislema
185
16k
Being A Developer After 40
akosma
90
590k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Bash Introduction
62gerente
615
210k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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 { }