CSS3 & SASSCSS STUDY GROUPWITH COMPASS
View Slide
Kerrick LongThings I make and do Where to find me onlinemeetup.com/STLEmberLead Front-end Developerat Second Streetwww. .comtwitter.com/KerrickLonggithub.com/Kerrick
selector {-prefix-property: value;selector {@include mixin($arg: 3);}}
CSS 3
CSS LEVEL 3MEDIA QUERIES
/* 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 3VENDOR PREFIXES
.button, button {border-radius: 3px;}
.button, button {border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
CSS LEVEL 3MODULES
CSS 3 BACKGROUNDS
CSS 3 FONTSWeb-safe Fonts
CSS 3 FONTSAwesome 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 CSSNESTING
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 CSSVARIABLES
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.scssfoo.scss foo.css
@IMPORTfoo.scss_bar.scssfoo.css
SASSY CSSMIX-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 CSSSASS SCRIPT
NESTING BASICS"string #{$interpolation}"10 * 10 <= 150 // true@if (true) { /* stuff */ }@else if { /* other stuff */ }@else { /* more stuff */ }
COMPASS
COMPASS STYLECSS 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-INSAnimation AppearanceBackground SizeBox ShadowBox SizingFont Face FilterOpacityTransformTransitionText Shadow Columns
COMPASS STYLEHELPERS
CSS3 PREFIX MIX-INS.foo {background: image-url('a.png');}.foo {background: url('//media.secondstreet.com/StaticContent/images/a.png');}
COMPASS UTILITIESSaturation LightnessColor StopsPrefixesInline ImagesFont Face √Tintsin/cos/tanEnumerateImage URL Font Files
kerrick
peterfriese
jrf
tsukushi
ikesyo
nacatl
pluu
pospome
teamhimeh
jpt_corp_official
gmvalentino8
murajun1978
mh4gf
rocio
cassininazir
eileencodes
ddemaree
paigeccino
quramy
shlominoach
jmmastey
morganepeng
thoeni
addyosmani
samanthasiow