Download - Sassy! Stylesheets with SCSS by Kathryn Rotondo

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

http://creativecommons.org/licenses/by-nc-sa/3.0


W'*$ / SCSS?


SCSS:S!"# CSS


0 "1p(r"($,f CSS3


F(*$1r&V*r)*b%&

M2)+"F1+3$),+"N&$)+4

I+'(r)$*+3(Saturday, May 11, 13

CSS pr(-pr,3&",r


"$#%(."3""

"$#%(.3""Saturday, May 11, 13

G($$)+4S$*r$(-


R1b# G(5'$$p://"!"-%*+4.3,5/

-,w+%,*-.'$5%


http://sass-lang.com/download.html




H*55(r'*55(rf,r5*3.3,5


http://hammerformac.com/

http://hammerformac.com/

R(*-# $, C,-(!


V*r)*b%&3,+"$*+$"


D(3%*r( V*r"

$blue: #3bbfce; $margin: 16px;


U"( V*r".border { color: $blue; margin:$margin;}


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, ...


M2)+"r(1"*b%( 3,-(

b%,3."


D(3%*r( M2)+@mixin centered { display:block; margin-le!:auto; margin-right:auto;}


U"( M2)+img { @include: centered;}


M2)+ 0r4"@mixin border-radius ($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}


M2)+ 0r4" U"(img { @include border-radius(20px);}


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);}


F1+3$),+"3,%,r", 5*$',

& 5,r(


C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & 5,r(!


F1+3$),+ U"(h1 { color:lighten($main-color, 20%);}

h2 { color:complement($main-color);}


B!)3 M*$'.border { color: $blue; margin:$margin; padding: $margin/2;}


M*$' F1+3$),+" percentage round, ceil, floor min, max abs


M,r( F1+3$),+"

'$$p://"!"-%*+4.3,5/-,3"/#*r-,3/S!"/

S3r)p$/F1+3$),+".'$5%


http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html








N&$)+4,r4*+7)+4 %).( w)$' %).(


N&$)+4a { color: $link-color;

&:hover { color: $link-hover-color; }}


M,r( N&$)+4#nav { a { color:$nav-color; &:hover { color: $nav-hover-color; } }}


I+'(r)$*+3(*v,)- -1p%)3*$),+


I+'(r)$*+3( .error { background: #fdd; }

.badError { @extend .error; border-width: 3px; }


C,55(+$"// 4($ r(5,v(-

/* "$*# *r,1+- */


D*+.(!K*$'r#+ R,$,+-,

.*$'r#+r,$,+-,.3,[email protected],$,+-,

This work is licensed under http://creativecommons.org/licenses/by-nc-sa/3.0


http://kathrynrotondo.com

http://kathrynrotondo.com

http://twitter.com/krotondo

http://twitter.com/krotondo



Download - Sassy! Stylesheets with SCSS by Kathryn Rotondo

Top Related