sassy stylesheets with scss

S!"#!S$#%&'(($" w)$' SCSS

K*$'r#+ R,$,+-,@.r,$,+-,

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

Saturday, September 14, 13

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


W'*$ / SCSS?


S0SSsass-lang.com/


http://sass-lang.com/

http://sass-lang.com/

SCSS:S!"# CSS


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


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

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

I+'(r)$*+3(Saturday, September 14, 13

CSS pr(-pr,3&",r


"$#%(."3""

"$#%(.3""Saturday, September 14, 13

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


R1b# G(5sass-lang.com/download.html


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




H*55(rhammerformac.com


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


N15b(r"1.213

10px


S$r)+4"“foo”‘bar’baz


C,%,r"blue

#04a3f9


B,,%(*+"truefalse


+1%%"null


L/$"1.5em 1em 0 2emHelvetica, 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;}


V(+-,r Pr(6@mixin border-radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}


B($$(r...@mixin border-radius { $radius: 5px; -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}


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


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


0r4 D(f*1%$"@mixin border-radius ($rad: 5px) { -moz-border-radius: $rad; -webkit-border-radius: $rad; border-radius: $rad;}


U")+4 D(f*1%$"img { @include border-radius;}


S)5p%)3)$#@mixin drop-shadow ($args) { -webkit-filter: drop-shadow($args); -moz-filter: drop-shadow($args); -ms-filter: drop-shadow ($args); -o-filter: drop-shadow ($args); filter: drop-shadow ($args);}


R(*-*b)%)$#@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;}


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

& 5,r(


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


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

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


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


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


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

*&&p://)/)-+.(0.$"!/,"$)/-.r,"$/S/)/

S$r%p&/F'($&%"().*&!+


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








N&$)+4.((p %).( w)$' %).(


B(f,r(a { color: $link-color;}

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


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+- */


B,1rb,+1 )%!p+# .(, +%0*&w#%0*& !2%( +%br.r- f"r S/).

bourbon.io


http://bourbon.io

http://bourbon.io

B"'rb"( N#.&1 +%0*&w#%0*& )#!.(&%$ 0r%,

fr.!#w"r3 f"r S/) .(, B"'rb"(.

neat.bourbon.io/


http://neat.bourbon.io/

http://neat.bourbon.io/

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

kathrynrotondo.com@krotondo

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



sassy stylesheets with scss

Technology