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
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
3
970
sachi_y_portfolio
sachi337
0
260
AI動画生成ガチャ紹介
piyo7
1
110
Liquid Iron
mcduckyart
1
110
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
150
クライアントワークにおける UXリサーチの実践
kozotaira
0
690
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
280
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
portfolio_YumiYasuda
yum0418
0
290
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Side Projects
sachag
455
42k
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Orchestrator
shlominoach
188
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Building an army of robots
kneath
306
45k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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