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
5.8k
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
390
Designing for the real world
kittygiraudel
0
320
Clever, stop being so
kittygiraudel
0
600
Clever, stop being so
kittygiraudel
1
630
Clever, stop being so
kittygiraudel
2
360
Local styling with CSS Modules
kittygiraudel
20
3.1k
Three Years of Purging Sass
kittygiraudel
4
960
Other Decks in Design
See All in Design
For My Dad- teaser
pdqsketch
PRO
0
170
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
1
130
Breaking News on the Web
souvikdg
0
380
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2k
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
710
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
190
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.4k
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
Sensitive Texter Storyboard
ctagulao98
0
160
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
471
290k
It's Worth the Effort
3n
181
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Design by the Numbers
sachag
277
18k
Writing Fast Ruby
sferik
623
60k
Documentation Writing (for coders)
carmenintech
63
4.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Practical Orchestrator
shlominoach
185
10k
How GitHub (no longer) Works
holman
305
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
What's new in Ruby 2.0
geeforr
338
31k
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