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
180
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
880
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.3k
Living Design Systems
jina
42
1.3M
Lightning Design System
jina
6
630
Sass & Style Guides
jina
11
460
Designing for Enterprise
jina
4
190
Refactoring Web Interfaces
jina
20
970
In Search of the Single Source of Truth
jina
1
360
Other Decks in Design
See All in Design
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
Museum Heist
allykae
0
120
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
260
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
TUNAG BOOK 2024
stmn
0
470
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
KATA
mclloyd
29
14k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Faster Mobile Websites
deanohume
306
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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