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
Keep Calm and Write Sass
Search
Kitty Giraudel
November 14, 2014
Design
8
6.2k
Keep Calm and Write Sass
Slides of my 18-minutes talk "Keep Calm and Write Sass" at dotCSS 2014 (November 14th).
Kitty Giraudel
November 14, 2014
Tweet
Share
More Decks by Kitty Giraudel
See All by Kitty Giraudel
L’accessibilité au delà des specs
kittygiraudel
0
470
Designing for the real world
kittygiraudel
0
400
Clever, stop being so
kittygiraudel
0
820
Clever, stop being so
kittygiraudel
1
720
Clever, stop being so
kittygiraudel
2
430
Local styling with CSS Modules
kittygiraudel
20
3.2k
Three Years of Purging Sass
kittygiraudel
4
1k
Other Decks in Design
See All in Design
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
400
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
390
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
630
デザイナー向けフライル説明資料
toshiblues
0
160
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
4.2k
minpaku-community-scrum-patterns
norinity1103
1
450
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
280
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.2k
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
How to Ace a Technical Interview
jacobian
280
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Agile that works and the tools we love
rasmusluckow
331
21k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Done Done
chrislema
185
16k
Thoughts on Productivity
jonyablonski
70
4.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Navigating Team Friction
lara
189
15k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
None
“Your CSS is a mess.” Jonathan Snook
Your CSS is a mess.
Broken from the start?
Sass to the rescue!
But... wait.
It's not all bright and shiny.
Complexity, maintainability, scary code...
Don't over-{think|engineer}
KISS Keep It Simple, Stupid!
KYSS Keep Your Sass Simple Keep Sass Simple at SitePoint
KYSSS Keep Your Sass Simple & Straightforward
KYSSSS Keep Your Sass Simple, Smart & Straightforward...
Write simple APIs
.parent { @include _( 10 8 6 4, $gutter: alpha
omega omega default ); }
.parent { width: 100%; @include respond-to("desktop") { width: 75%; }
}
$color: map-get( map-get( map-get( $themes, "shopping" ), "colors" ), "secondary"
);
$color: theme-conf( "shopping", "colors", "secondary" );
Beware of selector nesting Beware of selector nesting at SitePoint
Don't do everything in Sass
Rethinking Atwood's law
Anything that can be written in Sass will eventually be
written in Sass (probably by me)
SassyJSON @include json-encode(( "cats" : true, "answer" : 42 ));
// {"cats": true, "answer": 42} github.com/HugoGiraudel/SassyJSON
SassySort $list: sort( "How" "cool" "Sass" "is?" 42 ); //
42 "cool" "How" "is?" "Sass" github.com/HugoGiraudel/SassySort
SassyBitwise $value: bitwise(42 '&' 48); // 32 github.com/HugoGiraudel/SassyBitwise
Some things shouldn't be done
Vendor prefixing? Maybe not.
Autoprefixer Less code Up-to-date github.com/postcss/autoprefixer
REM? Think twice.
px_to_rem Less code Easier github.com/songawee/px_to_rem
None
Clean your code
.selector { color: blue; backgroud: url(unicorn.png); -webkit-transform: rotate(15deg); transform: rotate(15deg);
position: relative }
.selector { position: relative; -webkit-transform: rotate(15deg); transform: rotate(15deg); color: blue;
backgroud: url("unicorn.png"); }
cssguidelin.es
scss-lint github.com/causes/scss-lint
Document your code
.selector { overflow: hidden; white-space: nowrap; margin: -.5em; z-index: 42;
}
/** * 1. Clear inner floats * 2. Force all
items on same line * 3. Cancel items padding * 4. Above content, below modal */ .selector { overflow: hidden; /* 1 */ white-space: nowrap; /* 2 */ margin: -.5em; /* 3 */ z-index: 42; /* 4 */ }
Document your Sass
SassDoc sassdoc.com
/// Mixin to size an element /// @access public ///
@param {Number} $width - Width /// @param {Number} $height - Height /// @example scss - Sizing an element /// .element { /// @include size(100%, 5em); /// } SassDoc
SassDoc
Test your code
True or BootCamp
@include describe("A suite") { @include it("contains spec with expectation") {
@include should( expect(2 + 2), to(be(4)) ); } } Bootcamp github.com/thejameskyle/bootcamp
KISS - KYSS clean, test, document
And everything will be fine.
Thanks! @HugoGiraudel