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
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
120
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.4k
「UXとUIの違い」v2
shirasu3
0
230
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
アクセシビリティに取り組むメリット
magi1125
2
250
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
550
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
470
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building an army of robots
kneath
306
46k
A Tale of Four Properties
chriscoyier
160
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Side Projects
sachag
455
43k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Thoughts on Productivity
jonyablonski
70
4.8k
Building Applications with DynamoDB
mza
96
6.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