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
700
Clever, stop being so
kittygiraudel
2
410
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
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
200
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
610
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
harutaka Vision Deck
zenkigenforrecruit
0
150
How to get a Tiger to Tulsa
mcduckyart
0
110
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
290
freee + Product Design FY25Q4
freee
4
14k
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
140
Yumika Yamada Portfolio
yumii
0
660
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Done Done
chrislema
184
16k
Side Projects
sachag
455
42k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Code Reviewing Like a Champion
maltzj
524
40k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Statistics for Hackers
jakevdp
799
220k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rails Girls Zürich Keynote
gr2m
95
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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