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
6k
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
420
Designing for the real world
kittygiraudel
0
360
Clever, stop being so
kittygiraudel
0
680
Clever, stop being so
kittygiraudel
1
660
Clever, stop being so
kittygiraudel
2
380
Local styling with CSS Modules
kittygiraudel
20
3.1k
Three Years of Purging Sass
kittygiraudel
4
970
Other Decks in Design
See All in Design
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
520
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
360
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
570
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.6k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.3k
太田博三(@usagisan2020)
otanet
0
210
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
780
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
180
Night Shift (beginning sequence)
cpineda57
0
950
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
160
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
980
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.4k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Being A Developer After 40
akosma
89
590k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
182
16k
Building Applications with DynamoDB
mza
92
6.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Faster Mobile Websites
deanohume
305
30k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Large-scale JavaScript Application Architecture
addyosmani
510
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