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
700
Design Tokens in Design Systems
jina
10
27k
Designing a Design System
jina
34
6.8k
Living Design Systems
jina
42
40k
Lightning Design System
jina
6
600
Sass & Style Guides
jina
11
420
Designing for Enterprise
jina
4
160
Refactoring Web Interfaces
jina
20
930
In Search of the Single Source of Truth
jina
1
320
Other Decks in Design
See All in Design
Desarrollo de Carrera en Diseño y Producto
solmesz1
0
160
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
140
Concept Art of Pirate Cat
hansolo21
0
2.6k
ウェブディレクターを救うBacklog
wattlaa
0
250
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
510
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2k
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
1
150
Sociotechnical design for software and human systems
xinyao
1
410
実務のための マイクロ インタラクション入門
shingo2000
0
310
Wishing Star Comic
torije
1
1.1k
プロダクトデザインは子育て/Product design is parenting
medley
0
190
社内管理画面のデザインもプロダクトデザイン
takanorip
3
680
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Scaling GitHub
holman
456
140k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Gamification - CAS2011
davidbonilla
76
4.5k
BBQ
matthewcrist
78
8.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Bash Introduction
62gerente
604
210k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Building Applications with DynamoDB
mza
88
5.6k
Rails Girls Zürich Keynote
gr2m
91
13k
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