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.1k
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
460
Designing for the real world
kittygiraudel
0
390
Clever, stop being so
kittygiraudel
0
790
Clever, stop being so
kittygiraudel
1
710
Clever, stop being so
kittygiraudel
2
420
Local styling with CSS Modules
kittygiraudel
20
3.1k
Three Years of Purging Sass
kittygiraudel
4
1k
Other Decks in Design
See All in Design
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
2.5k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
370
Storyboard Honey
rocioparronrubio
0
290
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
AI動画生成ガチャ紹介
piyo7
1
150
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.3k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
330
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
370
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
260
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
130
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.2k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Speed Design
sergeychernyshev
32
1k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Documentation Writing (for coders)
carmenintech
72
4.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Gamification - CAS2011
davidbonilla
81
5.4k
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