Sassy! Stylesheets with SCSS by Kathryn Rotondo
34
S! S w SCSS Kr R @r This work is licensed under http://creativecommons.org/licenses/by-nc-sa/3.0 Saturday, May 11, 13
-
Upload
codemotion -
Category
Technology
-
view
107 -
download
1
description
If you’ve ever wished for more readable and maintainable CSS, SCSS (the current version of Sass) is the tool you’ve been waiting for. SCSS builds upon CSS3 to add features such as reusable variables and blocks, functions for manipulating colors and doing mathematical operations, selector nesting, and style inheritance. Before deploying, you simply compile your SCSS into ordinary CSS files in one easy (and easily automated) step. This session will present the core features of SCSS with helpful examples, and get you excited about writing CSS again.
Transcript of 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
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,[email protected],$,+-,
This work is licensed under http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, May 11, 13
