sassy! stylesheets with scss by kathryn rotondo
Post on 28-Jan-2015
106 Views
Preview:
DESCRIPTION
TRANSCRIPT
S!"#!S$#%&'(($" w)$' SCSS
K*$'r#+ R,$,+-,@.r,$,+-,
This work is licensed under http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, May 11, 13
W'*$ / SCSS?
Saturday, May 11, 13
SCSS:S!"# CSS
Saturday, May 11, 13
0 "1p(r"($,f CSS3
Saturday, May 11, 13
F(*$1r&V*r)*b%&
M2)+"F1+3$),+"N&$)+4
I+'(r)$*+3(Saturday, May 11, 13
CSS pr(-pr,3&",r
Saturday, May 11, 13
"$#%(."3""
"$#%(.3""Saturday, May 11, 13
G($$)+4S$*r$(-
Saturday, May 11, 13
R1b# G(5'$$p://"!"-%*+4.3,5/
-,w+%,*-.'$5%
Saturday, May 11, 13
R(*-# $, C,-(!
Saturday, May 11, 13
V*r)*b%&3,+"$*+$"
Saturday, May 11, 13
D(3%*r( V*r"
$blue: #3bbfce; $margin: 16px;
Saturday, May 11, 13
U"( V*r".border { color: $blue; margin:$margin;}
Saturday, May 11, 13
V*r)*b%&+15b(r" 1.2, 13, 10px"$r)+4" "foo", 'bar', baz3,%,r" blue, #04a3f9b,,%(*+" true, false+1%%" null%/$" 1.5em 1em 0 2em Helvetica, Arial, ...
Saturday, May 11, 13
M2)+"r(1"*b%( 3,-(
b%,3."
Saturday, May 11, 13
D(3%*r( M2)+@mixin centered { display:block; margin-le!:auto; margin-right:auto;}
Saturday, May 11, 13
U"( M2)+img { @include: centered;}
Saturday, May 11, 13
M2)+ 0r4"@mixin border-radius ($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}
Saturday, May 11, 13
M2)+ 0r4" U"(img { @include border-radius(20px);}
Saturday, May 11, 13
V(+-,r Pr(6&@mixin box-shadow ($h-shadow, $v-shadow, $blur, $color) { -moz-box-shadow: $h-shadow $v-shadow $blur $color; -webkit-box-shadow: $h-shadow $v-shadow $blur $color; box-shadow: $h-shadow $v-shadow $blur $color;}
@mixin drop-shadow { $args: 0 15px 30px rgba(0,0,0,.5); -webkit-filter: drop-shadow(args); -moz-filter: drop-shadow(args); -ms-filter: drop-shadow (args); -o-filter: drop-shadow (args); filter: drop-shadow (args);}
Saturday, May 11, 13
F1+3$),+"3,%,r", 5*$',
& 5,r(
Saturday, May 11, 13
C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & 5,r(!
Saturday, May 11, 13
F1+3$),+ U"(h1 { color:lighten($main-color, 20%);}
h2 { color:complement($main-color);}
Saturday, May 11, 13
B!)3 M*$'.border { color: $blue; margin:$margin; padding: $margin/2;}
Saturday, May 11, 13
M*$' F1+3$),+" percentage round, ceil, floor min, max abs
Saturday, May 11, 13
M,r( F1+3$),+"
'$$p://"!"-%*+4.3,5/-,3"/#*r-,3/S!"/
S3r)p$/F1+3$),+".'$5%
Saturday, May 11, 13
N&$)+4,r4*+7)+4 %).( w)$' %).(
Saturday, May 11, 13
N&$)+4a { color: $link-color;
&:hover { color: $link-hover-color; }}
Saturday, May 11, 13
M,r( N&$)+4#nav { a { color:$nav-color; &:hover { color: $nav-hover-color; } }}
Saturday, May 11, 13
I+'(r)$*+3(*v,)- -1p%)3*$),+
Saturday, May 11, 13
I+'(r)$*+3( .error { background: #fdd; }
.badError { @extend .error; border-width: 3px; }
Saturday, May 11, 13
C,55(+$"// 4($ r(5,v(-
/* "$*# *r,1+- */
Saturday, May 11, 13
D*+.(!K*$'r#+ R,$,+-,
.*$'r#+r,$,+-,.3,5@.r,$,+-,
This work is licensed under http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, May 11, 13
top related