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 Me Up, Scotty
Search
Ricardo Vazquez
August 11, 2013
Design
5
240
Sass Me Up, Scotty
This tutorial was delivered at Pycon Canada on August 11th, 2013.
Ricardo Vazquez
August 11, 2013
Tweet
Share
More Decks by Ricardo Vazquez
See All by Ricardo Vazquez
Finding Happiness in User Interface Design
rvazquez
8
450
CSS and Other Cool Stuff
rvazquez
5
400
Other Decks in Design
See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
AIで加速するアクセシビリティのこれから
magi1125
3
560
問いの変遷
iflection
0
160
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
minpaku-community-scrum-patterns
norinity1103
1
120
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
ポートフォリオ_webデザイナー
nami_webdesigner
0
100
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
harutaka Vision Deck
zenkigenforrecruit
0
150
PF_濵村ひろみ_202503
maru_design78
0
180
The Spectacular Lies of Maps
axbom
PRO
0
110
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Typedesign – Prime Four
hannesfritz
42
2.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Rails Girls Zürich Keynote
gr2m
95
14k
It's Worth the Effort
3n
185
28k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Practical Orchestrator
shlominoach
189
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Code Reviewing Like a Champion
maltzj
524
40k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
None
Ricardo Vazquez @iamrvazquez
The most beautiful photography in the world. The most beautiful
photography in the world.
design
design matters
design matters LOT a
TheGreat discontent
Design must be useful, aesthetic, discrete, lasting, useful. Most importantly,
good design must be as little as possible.
WeARE DESIGNERS
WhO Code...
style.css
global.css
S e p a r a t e your CSS,
or I’m coming after you.
bits.css typography.css layout.css footer.css ui.css modules.css global.css
@import ‘bits.css’ @import ‘ui.css’ @import ‘typography.css’
Wishful Thinking
Sass Me up
OMG WTH IS SASS?
None
No.
Sass is an extension of CSS3 which adds nested rules,
variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
A computer program that modifies data to conform with the
input requirements of another program.
SASS
SASS CSS
CSS MAGIC SASS
THe OTHERS
None
None
None
I used to Drink the hard stuff
CSS can be Beautiful
Let’s get Started
Mod. ARCH. Variables Nesting Extend Mixins Functions IF ELSE each
Compass UI/UX Smiles
GIFs
None
Variables
$siteBg = #B9C1C7 $labelBg = #02ADEA $moduleClr = #AEAFB0
span display: inline-block background: $labelBg margin: 5px 5px 0 0
NESTING
.photo-details.active h4 .select { width: 236px; }
.photo-details display: none &.active display: block h4 color: $blue font-size:
14px font-family: $helvetica font-weight: bold text-transform: uppercase .select width: 236px
None
Don’t. Repeat. YOURSELF.
BE A Designer
v EXtending
v Abstract Classes or Placeholders %
%sidebar-box margin: 0 0 10px 0 background: $bg padding: 10px
.sidebar-auth-box @extend %sidebar-box input[type=text] padding: 10px border: 1px solid #ccc
http://bit.ly/sass-extend
Simple, right?
MIXxxINS
Mixins output code instead of returning a result
@mixin underline-on-hover() text-decoration: none &:hover text-decoration: underline
=underline-on-hover( ) text-decoration: none &:hover text-decoration: underline
a:link color: $active background: $buttonBg padding: 5px 10px +underline-on-hover
String Interpolation in CSS?
HELL YES
=vendorize($property, $value) -webkit-#{$property}: $value -moz-#{$property}: $value -ms-#{$property}: $value -o-#{$property}: $value
#{$property}: $value
+vendorize(appearance, none)
+vendorize(appearance, none) +vendorize(box-sizing, border-box)
v =group( ) &:before, &:after content: "\0020" display: block height:
0 overflow: hidden &:after clear: both
v Know what? We could have done that a better
way.
v %clearfix:before, &:after content: "\0020" display: block height: 0 overflow:
hidden &:after clear: both
v Boom
v CONTROL Directives
v FunctionS
v A function is very similar to a mixin, however
the output from a function is a single value.
@function add($x, $y) @return $x + $y
v .my-module padding: add(10px, 5px)
.my-module padding: add(10px, 5px) @function add($x, $y) @return $x +
$y ...
None
target / context = result
target / context = result 650px / 1000px = 65%
target / context = result 650px / 1000px = 65%
@function calc-p($target, $container) @return ($target / $container) * 100%
target / context = result 650px / 1000px = 65%
@function calc-p($target, $container) @return ($target / $container) * 100% .my-module width: calc-p(650px, 1000px)
None
Reusable LOGIC
There are functions for colour, too!
$base: #2c3e50 darken($base, 8%) lighten($base, 8%) saturate(%base, 20%) desaturate(%base, 20%)
adjust-hue($base, 20%) rgba($base, .5) tint($base, 10%) shade($base, 10%)
http://bit.ly/sass-colour
IFELSE
The @if directive takes a condition to evaluate and returns
the nested styles if the condition is truthy (not false or null). Specifying what to return if the condition is falsey can be done using the @else statement.
http://bit.ly/sass-ifelse
[at]EACH
The @each directive takes the form @each $var in <list>
$var can be any variable name, and <list> is a SassScript expression that returns a list
http://bit.ly/sass-each
MEDIa Queries
None
None
Yes, media queries can actually be simple!
http://bit.ly/sass-media
Still, we shouldn’t be spending our time writing mixins and
extending all over the place. There’s gotta be something better.
COMPASS i’m lost... get me a
None
@import "compass/css3/border-radius" @import "compass/css3/transition" @import "compass/css3/opacity" @import "compass/css3/box-shadow" @import "compass/css3/text-shadow"
+single-box-shadow (rgba(0,0,0,0.3),0px,1px, 3px,false,true)
ADMIT I Must
on UI A WORD and UX
Our vision is optimized to see structure Know your user
State visualization Focus Help User testing Aesthetics
And LOGIC Emotion
Envision your users, and design logically; it will yield emotion
if you let it breathe.
CSS is Modular
CSS is scalable
CSS is design
CSS is code
CSS is smart
CSS is not alone
READ!
CREATE!
SHARE!
Make OUR Community Better
CULL & Surrender
@iamrvazquez rvazquez.ca THANK YOU