sassy stylesheets with scss
Post on 06-May-2015
686 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, September 14, 13
W'*$ / SCSS?
Saturday, September 14, 13
SCSS:S!"# CSS
Saturday, September 14, 13
0 "1p(r"($,f CSS3
Saturday, September 14, 13
F(*$1r&V*r)*b%&
M2)+"F1+3$),+"N&$)+4
I+'(r)$*+3(Saturday, September 14, 13
CSS pr(-pr,3&",r
Saturday, September 14, 13
"$#%(."3""
"$#%(.3""Saturday, September 14, 13
G($$)+4S$*r$(-
Saturday, September 14, 13
R1b# G(5sass-lang.com/download.html
Saturday, September 14, 13
R(*-# $, C,-(!
Saturday, September 14, 13
V*r)*b%&3,+"$*+$"
Saturday, September 14, 13
D(3%*r( V*r"
$blue: #3bbfce; $margin: 16px;
Saturday, September 14, 13
U"( V*r".border { color: $blue; margin:$margin;}
Saturday, September 14, 13
N15b(r"1.213
10px
Saturday, September 14, 13
S$r)+4"“foo”‘bar’baz
Saturday, September 14, 13
C,%,r"blue
#04a3f9
Saturday, September 14, 13
B,,%(*+"truefalse
Saturday, September 14, 13
+1%%"null
Saturday, September 14, 13
L/$"1.5em 1em 0 2emHelvetica, Arial, ...
Saturday, September 14, 13
M2)+"r(1"*b%( 3,-(
b%,3."
Saturday, September 14, 13
D(3%*r( M2)+@mixin centered { display:block; margin-le!:auto; margin-right:auto;}
Saturday, September 14, 13
U"( M2)+img { @include: centered;}
Saturday, September 14, 13
V(+-,r Pr(6@mixin border-radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
Saturday, September 14, 13
V(+-,r Pr(6@mixin border-radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
Saturday, September 14, 13
B($$(r...@mixin border-radius { $radius: 5px; -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}
Saturday, September 14, 13
0r415(+$"@mixin border-radius ($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}
Saturday, September 14, 13
U")+4 0r4"img { @include border-radius(20px);}
Saturday, September 14, 13
0r4 D(f*1%$"@mixin border-radius ($rad: 5px) { -moz-border-radius: $rad; -webkit-border-radius: $rad; border-radius: $rad;}
Saturday, September 14, 13
U")+4 D(f*1%$"img { @include border-radius;}
Saturday, September 14, 13
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);}
Saturday, September 14, 13
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;}
Saturday, September 14, 13
F1+3$),+"3,%,r", 5*$',
& 5,r(
Saturday, September 14, 13
C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & !"r#!
Saturday, September 14, 13
C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & !"r#!
Saturday, September 14, 13
C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & !"r#!
Saturday, September 14, 13
C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & !"r#!
Saturday, September 14, 13
C,%,r F1+3$),+"rgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize ... & !"r#!
Saturday, September 14, 13
F1+3$),+ U"(h1 { color:lighten($main-color, 20%);}
h2 { color:complement($main-color);}
Saturday, September 14, 13
B!)3 M*$'.border { margin:$margin; padding: $margin/2;}
Saturday, September 14, 13
M*$' F1+3$),+" percentage round, ceil, floor min, max abs
Saturday, September 14, 13
M,r( F1+3$),+"
*&&p://)/)-+.(0.$"!/,"$)/-.r,"$/S/)/
S$r%p&/F'($&%"().*&!+
Saturday, September 14, 13
N&$)+4.((p %).( w)$' %).(
Saturday, September 14, 13
B(f,r(a { color: $link-color;}
a:hover { color: $link-hover-color;}
Saturday, September 14, 13
N&$)+4a { color: $link-color;
&:hover { color: $link-hover-color; }}
Saturday, September 14, 13
M,r( N&$)+4#nav { a { color:$nav-color; &:hover { color: $nav-hover-color; } }}
Saturday, September 14, 13
I+'(r)$*+3(*v,)- -1p%)3*$),+
Saturday, September 14, 13
I+'(r)$*+3( .error { background: #fdd; }
.badError { @extend .error; border-width: 3px; }
Saturday, September 14, 13
C,55(+$"// 4($ r(5,v(-
/* "$*# *r,1+- */
Saturday, September 14, 13
B,1rb,+1 )%!p+# .(, +%0*&w#%0*& !2%( +%br.r- f"r S/).
bourbon.io
Saturday, September 14, 13
B"'rb"( N#.&1 +%0*&w#%0*& )#!.(&%$ 0r%,
fr.!#w"r3 f"r S/) .(, B"'rb"(.
neat.bourbon.io/
Saturday, September 14, 13
D*+.!K*$'r#+ R,$,+-,
kathrynrotondo.com@krotondo
This work is licensed under http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, September 14, 13
top related