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
810
Clever, stop being so
kittygiraudel
1
720
Clever, stop being so
kittygiraudel
2
420
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
CursorでAI活用のナレッジベースを構築する
kanzaki
0
660
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
300
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
UXデザインはなぜ定着しないのか?
designstudiopartners
0
940
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
sachi_y_portfolio
sachi337
0
520
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
Cyber Heart Online Book
hjnasby
0
180
株式会社Muture_ソーシャル推進事業
muture
PRO
0
140
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
For a Future-Friendly Web
brad_frost
180
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Balancing Empowerment & Direction
lara
3
610
Optimizing for Happiness
mojombo
379
70k
Code Review Best Practice
trishagee
70
19k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Large-scale JavaScript Application Architecture
addyosmani
512
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