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
CSS Study Group 2
Search
Kerrick Long
October 30, 2014
Programming
1
980
CSS Study Group 2
Kerrick Long
October 30, 2014
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
15 Things You Shouldn't Do In Ember Anymore
kerrick
0
1k
The ECMAScript formerly known as 6
kerrick
0
1.1k
CSS Study Group 1
kerrick
0
1.1k
Services & Component Collaboration
kerrick
0
730
Donate STL #Build4STL Hackathon Keynote
kerrick
0
280
Donate STL
kerrick
0
800
TDD With Ember.js
kerrick
0
1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
7.3k
Other Decks in Programming
See All in Programming
What We Can Learn From OSS
inouehi
0
390
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
受託開発でGitLab CI を活用していく
xiombatsg
1
260
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
270
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Elm Form Validation
bkuhlmann
0
500
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
9
5.6k
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
object-oriented-conference-2024
fuwasegu
8
2.7k
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
Featured
See All Featured
Atom: Resistance is Futile
akmur
258
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Design by the Numbers
sachag
274
18k
The Cult of Friendly URLs
andyhume
73
5.7k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
Being A Developer After 40
akosma
56
580k
For a Future-Friendly Web
brad_frost
171
8.9k
Clear Off the Table
cherdarchuk
82
310k
Making Projects Easy
brettharned
107
5.5k
Transcript
CSS3 & SASS CSS STUDY GROUP WITH COMPASS
Kerrick Long Things I make and do Where to find
me online meetup.com/STLEmber Lead Front-end Developer at Second Street www. .com twitter.com/KerrickLong github.com/Kerrick
selector { -prefix-property: value; selector { @include mixin($arg: 3); }
}
CSS 3
CSS LEVEL 3 MEDIA QUERIES
None
None
/* small-screen styles */ .header { width: 100%; } @media
(min-width: 481px) { /* large-screen styles */ .header { width: 50%; } }
@media (min-width: 481px) { .header { width: 50%; } }
LOGICAL IF
@media (min-width: 481px) and (max-width: 1280px) { .header { width:
50%; } } LOGICAL AND
@media (min-width: 481px), (max-width: 1280px) { .header { width: 50%;
} } LOGICAL OR
@media not all and (min-width: 481px) { .header { width:
50%; } } LOGICAL NOT
CSS LEVEL 3 VENDOR PREFIXES
None
None
.button, button { border-radius: 3px; }
.button, button { border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:
3px; }
.button, button { border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:
3px; }
CSS LEVEL 3 MODULES
CSS 3 BACKGROUNDS
CSS 3 BACKGROUNDS
CSS 3 BACKGROUNDS
CSS 3 FONTS Web-safe Fonts
CSS 3 FONTS Awesome Fonts! @font-face { font-family: 'Jazz'; src:
url('jazz.woff') format('woff') }
CSS 3 BORDER-RADIUS
CSS 3 BOX-SHADOW
CSS 3 OPACITY
SASS
SASSY CSS NESTING
NESTING BASICS .foo { color: blue; .bar { color: red;
} } .foo { color: blue; } .foo .bar { color: red; }
NESTED PARENT SELECTOR .foo { color: blue; &:hover { color:
red; } } .foo { color: blue; } .foo:hover { color: red; }
NESTED PARENT SELECTOR .foo { color: blue; .baz & {
color: red; } } .foo { color: blue; } .baz .foo { color: red; }
NESTED @AT-ROOT .foo { color: blue; @at-root .bar { color:
red; } } .foo { color: blue; } .bar { color: red; }
NESTED MEDIA QUERIES .foo { color: blue; @media (screen) {
color: red; } } .foo { color: blue; } @media (screen) { .foo { color: red; } }
SASSY CSS VARIABLES
VARIABLES $red: #f01903; .foo { color: $red; } .bar {
background: $red; } .foo { color: #f01903; } .bar { background: #f01903; }
VARIABLE SCOPE $red: #f01903; .foo { $red: #a12014; color: $red;
} .bar { background: $red; } .foo { color: #a12014; } .bar { background: #f01903; }
VARIABLE DEFAULT $red: #f01903; .foo { $red: #a12014 !default; color:
$red; } .bar { background: $red; } .foo { color: #f01903; } .bar { background: #f01903; }
SASSY CSS @EXTEND
@EXTEND .foo { color: red; } .bar { @extend .foo;
} .foo, .bar { color: red; }
@EXTEND EVERYWHERE .foo { color: red; &:hover { border: 0
} } .bar { @extend .foo; } .foo, .bar { color: red; } .foo:hover, .bar:hover { border: 0; }
SASSY CSS @IMPORT
@IMPORT @import "bar"; .foo { color: red; } .bar {
color: blue; } .bar { color: blue; } .foo { color: red; } _bar.scss foo.scss foo.css
@IMPORT foo.scss _bar.scss foo.css
SASSY CSS MIX-INS
USING MIX-INS .foo { @include button(3px); } .foo { border-radius:
3px; display: inline-block; /* etc. */ }
CREATING MIX-INS @mixin button($radius) { border-radius: $radius; display: inline-block; /*
etc. */ }
DEFAULT ARGUMENTS @mixin button($radius: 3px) { border-radius: $radius; display: inline-block;
/* etc. */ } .button { @include button } .round { @include button(8px) } .button { border-radius: 3px; display: inline-block; /* etc. */ } .round { border-radius: 8px; display: inline-block; /* etc. */ }
NAMED ARGUMENTS @mixin foo($a, $b) { /* stuff */ }
.bar { @include foo($b: 1); } .baz { @include foo($b: 1, $a: 2); } .bar { /* stuff */ } .baz { /* stuff */ }
SASSY CSS SASS SCRIPT
NESTING BASICS "string #{$interpolation}" 10 * 10 <= 150 //
true @if (true) { /* stuff */ } @else if { /* other stuff */ } @else { /* more stuff */ }
COMPASS
COMPASS STYLE CSS 3
CSS3 PREFIX MIX-INS @import "compass/css3"; .foo { @include border-radius(3px); }
.foo { border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
CSS3 PREFIX MIX-INS Animation Appearance Background Size Box Shadow Box
Sizing Font Face Filter Opacity Transform Transition Text Shadow Columns
COMPASS STYLE HELPERS
CSS3 PREFIX MIX-INS .foo { background: image-url('a.png'); } .foo {
background: url('// media.secondstreet.com/ StaticContent/images/a.png'); }
COMPASS UTILITIES Saturation Lightness Color Stops Prefixes Inline Images Font
Face √ Tint sin/cos/tan Enumerate Image URL Font Files
None