Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
CSS Study Group 2
Kerrick Long
October 30, 2014
Programming
1
450
CSS Study Group 2
Kerrick Long
October 30, 2014
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
kerrick
0
490
kerrick
0
510
kerrick
0
470
kerrick
0
400
kerrick
0
65
kerrick
0
480
kerrick
0
460
kerrick
18
5.8k
Other Decks in Programming
See All in Programming
thatjeffsmith
0
1.3k
chimerast
0
340
hyodol2513
2
1.1k
deepu105
0
230
drumato
1
230
tarappo
4
420
yusuke57
2
280
timeseriesfr
0
100
ykpythemind
0
140
hamakou108
4
510
clusterinc
0
270
takuyaa
4
470
Featured
See All Featured
colly
66
3k
morganepeng
94
14k
gr2m
83
11k
reverentgeek
27
2.1k
jacobian
257
20k
pedronauck
652
110k
rmw
12
870
edds
56
9.4k
jnunemaker
PRO
40
4.7k
cherdarchuk
71
270k
akmur
252
19k
jensimmons
208
10k
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