Más contenido relacionado Similar a Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version) (20) Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)5. What is Sass?
• CSS on steroids
• Adds Variables, Mixins, Nesting,
Inheritance, and more…
• It’s a meta-language that compiles
to plain old CSS
• Two “flavors” - Sass & SCSS
8. SCSS came next
body {
background-color: #fff;
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
}
9. body#home.home {
.content {
#learn-more {
#faq {
margin-top: 20px;
aside {
width: 300px;
padding: 0 40px;
h4 span {
@include sans-serif-font(20px);
}
ul {
color: #666;
font-size: 12px;
line-height: 1.5;
list-style: square;
padding-left: 1.2em;
li {
margin-bottom: 8px;
{
li:before {
color: red;
}
}
}
ol {
@include sans-serif-font(24px, $heading-color);
list-style: decimal;
max-width: 480px;
p {
font-size: 16px;
margin: 1em 0;
}
}
}
}
}
}
10. ol {
@include sans-serif-font(24px, $hea
list-style: decimal;
max-width: 480px;
p {
font-size: 16px;
margin: 1em 0;
}
}
}
}
}
}
11. body#home.home {
.content {
#learn-more {
#faq {
margin-top: 20px;
aside {
width: 300px;
padding: 0 40px;
h4 span {
@include sans-serif-font(20px);
}
ul {
color: #666;
font-size: 12px;
line-height: 1.5;
list-style: square;
padding-left: 1.2em;
li {
margin-bottom: 8px;
{
li:before {
color: red;
}
}
}
ol {
@include sans-serif-font(24px, $heading-color);
list-style: decimal;
max-width: 480px;
p {
font-size: 16px;
margin: 1em 0;
}
}
}
}
}
}
12. body#home.home { body#home.home
.content { .content
#learn-more { #learn-more
#faq { #faq
margin-top: 20px; margin-top: 20px
aside { aside
width: 300px; width: 300px
padding: 0 40px; padding: 0 40px
h4 span { h4 span
@include sans-serif-font(20px); @include sans-serif-font(20px)
} ul
ul { color: #666
color: #666; font-size: 12px
font-size: 12px; line-height: 1.5
line-height: 1.5; list-style: square
list-style: square; padding-left: 1.2em
padding-left: 1.2em; li
li { margin-bottom: 8px
margin-bottom: 8px; li:before
{ color: red
li:before { ol
color: red; @include sans-serif-font(24px, $heading-color)
} list-style: decimal
} max-width: 480px
} p
ol { font-size: 16px
@include sans-serif-font(24px, $heading-color); margin: 1em 0
list-style: decimal;
max-width: 480px;
p {
font-size: 16px;
margin: 1em 0;
}
}
}
}
Sass > SCSS
}
}
22. -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.bar {
property: value;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dude {
property: value;
property: value;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.guy {
property: value;
-moz-border-radius: 10px;
26. Or, pre-populate the mixin:
@mixin box_shadow($h_offset: 0, $v_offset: 0,
-->$blur_radius: 5px, $color: #AAA)
-moz-box-shadow: $h_offset $v_offset $blur_radius $color
-webkit-box-shadow: $h_offset $v_offset $blur_radius $color
box-shadow: $h_offset $v_offset $blur_radius $color
--> Denotes “not a real line break”
27. Now, no argument is needed:
.foo
+box_shadow
Will render as:
.foo {
-moz-box-shadow: 0 0 5px #AAA;
-webkit-box-shadow: 0 0 5px #AAA;
box-shadow: 0 0 5px #AAA;
}
28. Or, you can override:
.foo
+box_shadow(2, 2, 10, #CCC)
Will render as:
.foo {
-moz-box-shadow: 2px 2px 10px #CCC;
-webkit-box-shadow: 2px 2px 10px #CCC;
box-shadow: 2px 2px 10px #CCC;
}
29. Gradients!
.foo
+box_gradient(#FFFFFF, #000000)
Will render as:
.foo {
background-image: -moz-linear-gradient(top, #FFFFFF,
-->#000000)
background-image: -o-linear-gradient(top, #FFFFFF,
-->#000000);
background-image: -webkit-gradient(linear,left top,left
--> bottom,color-stop(0, #FFFFFF),color-stop(1, #000000))
background-image: -webkit-linear-gradient(#FFFFFF,
-->#000000)
background-image: linear-gradient(top, #FFFFFF, #000000)
filter: progid:DXImageTransform.Microsoft.gradient
-->(startColorStr='#FFFFFF', EndColorStr='#000000')
}
--> Denotes “not a real line break” http://css3please.com/
30. The mixin:
@mixin box_gradient($start,$end)
background-image: -moz-linear-gradient(top, !start, !end)
background-image: -o-linear-gradient(top, !start, !end);
background-image: -webkit-gradient(linear,left top,left
--> bottom,color-stop(0, !start),color-stop(1, !end))
background-image: -webkit-linear-gradient(!start, !end)
background-image: linear-gradient(top, !start, !end)
filter: progid:DXImageTransform.Microsoft.gradient
-->(startColorStr='!start', EndColorStr='!end')
--> Denotes “not a real line break”
32. .dropdown-inner {
-moz-border-radius: 0 3px 3px 3px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
-moz-box-shadow: 1px 1px 4px #CCC;
-webkit-box-shadow: 1px 1px 4px #CCC;
box-shadow: 1px 1px 4px #CCC;
background-image: -moz-linear-gradient(top, #FFFFFF,
-->#FCF5DE)
background-image: -o-linear-gradient(top, #FFFFFF,
-->#000000);
background-image: -webkit-gradient(linear,left top,left
--> bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE))
background-image: -webkit-linear-gradient(#FFFFFF,
-->#FCF5DE)
background-image: linear-gradient(top, #FFFFFF, #FCF5DE)
filter: progid:DXImageTransform.Microsoft.gradient
-->(startColorStr='#FFFFFF', EndColorStr='#FCF5DE')
}
33. .dropdown-inner {
+border_radius(0 3px 3px 3px
-moz-border-radius: 03px 3px) 3px;
+box_shadow(1, 1, 4, #CCC)
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
+box_gradient(#FFFFFF, #FCF5DE)
-moz-box-shadow: 1px 1px 4px #CCC;
-webkit-box-shadow: 1px 1px 4px #CCC;
box-shadow: 1px 1px 4px #CCC;
background-image: -moz-linear-gradient(top, #FFFFFF,
-->#FCF5DE)
background-image: -o-linear-gradient(top, #FFFFFF,
-->#000000);
background-image: -webkit-gradient(linear,left top,left
--> bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE))
background-image: -webkit-linear-gradient(#FFFFFF,
-->#FCF5DE)
background-image: linear-gradient(top, #FFFFFF, #FCF5DE)
filter: progid:DXImageTransform.Microsoft.gradient
-->(startColorStr='#FFFFFF', EndColorStr='#FCF5DE')
}
34. More with mixins:
• Re-usable interface elements (buttons,
headers—with or without arguments).
• Reset styles (data tables, lists, etc.).
• References to frequently-accessed sprites.
• Frequently used IE hacks.
• Etc.
54. With a variable:
$default_color: #000064
.level1
background-color: $default_color
.level2
background-color: lighten($default_color, 15%)
.level3
background-color: lighten($default_color, 30%)
.level4
background-color: lighten($default_color, 45%)
.level5
background-color: lighten($default_color, 60%)
55. With a variable:
.level1 {
background-color: #000064; }
.level2 {
background-color: #0000b1; }
.level3 {
background-color: #0000fd; }
.level4 {
background-color: #4b4bff; }
.level5 {
background-color: #9797ff; }
58. <ul id="timeline-in">
<li id="dwhite" class="3b level5">White</li>
<li id="canson" class="1b hof level2">Anson</li>
<li id="jorourke" class="hof lf level4">O'Rourke</li>
<li id="pgalvin" class="p hof level2">Galvin</li>
<li id="mward" class="hof ss level5">Ward</li>
<li id="jmccormick" class="p level3">McCormick</li>
<li id="kkelly" class="hof rf level5">Kelly</li>
<li id="ggore" class="cf level5">Gore</li>
<li id="jglasscock" class="ss level4">Glasscock</li>
...
<li id="jbagwell" class="1b level2"></li>
</ul>
59. ul
list-style: none
padding: 40px 0 0
margin: 0
li
cursor: pointer
margin: 0 0 5px
padding: 0
display: block
padding: 2px
color: white
position: relative
62. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Pass in
margin-left: ($start_value*8) + px arguments for
start and end
$length: $end - $start
year.
width: ($length*8) - 4px
63. The mixin:
@mixin bar($start,$end)
$start_value is
$start_value: $start - 1870
the difference
margin-left: ($start_value*8) + px between the
$length: $end - $start start year and
width: ($length*8) - 4px 1870.
64. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Multiply
$start_value by
margin-left: ($start_value*8) + px
8 to get the left
$length: $end - $start margin (8 pixels
width: ($length*8) - 4px per year).
65. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Career $length
will be used to
margin-left: ($start_value*8) + px
determine the
$length: $end - $start width of the
width: ($length*8) - 4px box.
66. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Again, multiply
margin-left: ($start_value*8) + px by 8 to get the
width, and also
$length: $end - $start
subtract 4 pixels
width: ($length*8) - 4px (padding).
67. The magic:
#jbagwell
+bar(1991, 2005)
@mixin bar(1991,2005)
$start_value: 1991 - 1870 = 121
margin-left: (121*8) + px = 968px
$length: 2005 - 1991 = 14
width: (14*8) - 4px) = 108px
68. The magic:
#jbagwell
+bar(1991, 2005)
Will render as:
#jbagwell {
margin-left: 968px;
width: 108px;
}
69. margin-left: 16px;
width: 164px; }
#pgalvin {
Repeat: margin-left: 40px;
width: 132px; }
#kkelly {
margin-left: 64px;
width: 116px; }
#mward {
margin-left: 64px;
width: 124px; }
#dbrouthers {
margin-left: 72px;
width: 196px; }
#mwelch {
margin-left: 80px;
width: 92px; }
#tkeefe {
margin-left: 80px;
width: 100px; }
#rconnor {
margin-left: 80px;
width: 132px; }
#bewing {
margin-left: 80px;
width: 132px; }
#cradbourn {
margin-left: 88px;
width: 76px; }
#jclarkson {
margin-left: 96px;
width: 92px; }
#bmcphee {
margin-left: 96px;
width: 132px; }
#tmccarthy {
margin-left: 112px;
width: 92px; }
73. Compiling?
$ sass --watch ./sass/:./css/
# all .sass files compiled into ./css
$ sass --update
sass/style.sass:css/style.css
# ... style.sass => style.css
76. Compress / Minify
~/sites/designsponge joel $ ls -hal style.css
-rw-r--r-- 1 joel staff 32K Mar 18 11:26 style.css
~/sites/designsponge joel $ cp style.css style.scss
~/sites/designsponge joel $ sass -t compressed style.scss
style_compressed.css
~/sites/designsponge joel $ ls -hal *.*css
-rw-r--r-- 1 joel staff 32K Mar 18 11:26 style.css
-rw-r--r-- 1 joel staff 32K Mar 18 11:33 style.scss
-rw-r--r-- 1 joel staff 26K Mar 18 11:34 style_compressed.css