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
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
230
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
300
UXデザインはなぜ定着しないのか?
designstudiopartners
0
930
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.1k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
250
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
What makes a great Director?
_limex_
0
200
mento Design Team Portfolio
mento0fficial
1
620
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
390
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How to Ace a Technical Interview
jacobian
279
23k
Documentation Writing (for coders)
carmenintech
73
5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Building Applications with DynamoDB
mza
96
6.6k
Embracing the Ebb and Flow
colly
87
4.8k
KATA
mclloyd
32
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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