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
Sass Basics #2
Search
jina
April 22, 2014
Design
1
170
Sass Basics #2
A beginner-level presentation I gave internally at work to teach the basics of Sass.
jina
April 22, 2014
Tweet
Share
More Decks by jina
See All by jina
Design Systems are for People
jina
1
730
Design Tokens in Design Systems
jina
9
27k
Designing a Design System
jina
34
6.9k
Living Design Systems
jina
42
40k
Lightning Design System
jina
6
600
Sass & Style Guides
jina
11
430
Designing for Enterprise
jina
4
170
Refactoring Web Interfaces
jina
20
940
In Search of the Single Source of Truth
jina
1
330
Other Decks in Design
See All in Design
Ubie Vitalsの取り組み紹介
8845musign
0
280
Wolf and the seven goatkids
_limex_
PRO
0
510
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
330
User Experience Design für Entwickler
joergneumann
4
870
1人歩きする営業資料作成
yutoshukuya
2
180
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.5k
文化に寄りそうデザイン
recruitengineers
PRO
4
960
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
200
プロダクトデザインは子育て/Product design is parenting
medley
0
350
社内管理画面のデザインもプロダクトデザイン
takanorip
4
790
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
300
実案件でのFigmaデータの作り方
xxxkinu
2
240
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Designing Experiences People Love
moore
136
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Designing the Hi-DPI Web
ddemaree
276
33k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Designing for Performance
lara
601
67k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Building Your Own Lightsaber
phodgson
100
5.7k
Transcript
JINA BOLTON SENIOR PRODUCT DESIGNER SALESFORCE UX Sass Basics #2
…PREVIOUSLY IN Sass Basics #1 INTRODUCTION TO SASS COMMENTING NESTING
VARIABLES
Sass Basics #2 INTRODUCTION TO MIXINS PASSING ARGUMENTS CONTENT BLOCKS
MIXIN LIBRARIES
SASSMEISTER.COM
CSS Output SCSS .thingy { background: #eee; color: #444; }
@mixin module { background: #eee; color: #444; } .thingy { @include module; }
Sass SCSS =module background: #eee color: #444 @mixin module {
background: #eee; color: #444; }
You can nest selectors in a mixin.
CSS Output SCSS .thingy { background: #eee; } .thingy .this
{ color: #444; } @mixin module { background: #eee; .this { color: #444; } } .thingy { @include module; }
You can include mixins outside of rules…
CSS Output SCSS .this { color: #444; } .that {
color: #444; } @mixin module { .this { color: #444; } .that { color: #ccc; } } @include module;
…unless you directly define properties or parent selectors.
CSS Output SCSS Invalid CSS after "...lor: #ccc; }} ":
expected "{", was "@include module;" @mixin module { color: #444; &.that { color: #ccc; } } @include module;
You can include other mixins in mixins.
CSS Output SCSS .thingy { background: #222; color: #ccc; }
.thingy a { color: #fff; } @mixin dark-theme { background: #222; color: #ccc; } @mixin module { @include dark-theme; a { color: #fff; } } .thingy { @include module; }
You can pass in arguments.
CSS Output SCSS .thingy1 { background: #eee; color: #444; }
.thingy2 { background: #eee; color: purple; } .thingy3 { background: green; color: red; } .thingy4 { background: blue; color: #444; } @mixin module($text: #444, $background: #eee) { background: $background; color: $text; } .thingy1 { @include module; } .thingy2 { @include module(purple); } .thingy3 { @include module(red, green); } .thingy4 { @include module($background: blue); }
You can pass in content blocks.
CSS Output SCSS * html .thingy1 { display: inline; }
@mixin ie6-only { * html { @content; } } @include ie6-only { .thingy1 { display: inline; } }
With great power, comes great responsibility ;-)
Every time you use a Mixin, you output that code
again.
SASS-LANG.COM
USE SASSMEISTER TO EXPERIMENT WITH MIXINS. BUILD A BASIC MIXIN
LIBRARY NEXT WEEK: EXTENDING & PLACEHOLDER SELECTORS your homework