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
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
sachi_y_portfolio
sachi337
0
350
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
480
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
AI時代に淘汰されないデザインのしごと
akinen
1
150
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
100
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
AIで加速するアクセシビリティのこれから
magi1125
3
580
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
クライアントワークにおける UXリサーチの実践
kozotaira
0
710
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Invisible Side of Design
smashingmag
301
51k
How STYLIGHT went responsive
nonsquared
100
5.6k
It's Worth the Effort
3n
185
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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