Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)

Sassive Aggressive
Using Sass to make your life easier

Who?
Joel Oliveira Adam Darowski
Developer, The47th Web Developer, PatientsLikeMe

What is this “Sass”?

• CSS on steroids.
• Variables, Mixins, Nesting,
Inheritance, and more…

• Two “ﬂavors” - SASS & SCSS

Compiling?
$ sass --watch ./sass/:./css/
# all .sass files compiled into ./css

$ sass --update
sass/style.sass:css/style.css
# ... style.sass => style.css

Compiling?
... on the what?
blech...

Why?
• Vendor Preﬁxes
• “DRY” - Don’t Repeat Yourself
• Instant Compression / Miniﬁcation
• Organization - partials (“includes”)
• It’s the future - Chrome team
already exploring these concepts.

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

.foo {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

}

.bar {
  property: value;
}

.dude {
  property: value;
  property: value;
}

.guy {
  property: value;

When using Sass…

.foo
  +border_radius(10px)

Will render as:
.foo {
}

The mixin:

@mixin border_radius($radius)
  -moz-border-radius: #{$radius}
  -webkit-border-radius: #{$radius}
  border-radius: #{$radius}

Another example:

.foo
  +box_shadow(0, 0, 5, #AAA)

Will render as:
.foo {
  -moz-box-shadow: 0 0 5px #AAA;
  -webkit-box-shadow: 0 0 5px #AAA;
  box-shadow: 0 0 5px #AAA;
}

Or, pre-populate the mixin:

@mixin box_shadow($h_offset: 0, $v_offset: 0,
-->$blur_radius: 5, $color: #AAA)
  -moz-box-shadow: #{$h_offset}px #{$v_offset}px
-->#{$blur_radius}px #{$color}
  -webkit-box-shadow: #{$h_offset}px #{$v_offset}px
  box-shadow: #{$h_offset}px #{$v_offset}px

--> Denotes “not a real line break”

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

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

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/

The mixin:

@mixin box_gradient($start,$end)
  background-image: -moz-linear-gradient(top, #{!start},
-->#{!end})
-->#000000);
--> bottom,color-stop(0, #{!start}),color-stop(1,
-->#{!end}))
  background-image: -webkit-linear-gradient(#{!start},
-->#{!end})
  background-image: linear-gradient(top, #{!start}, #{!end})
-->(startColorStr='#{!start}', EndColorStr='#{!end}')

--> Denotes “not a real line break”

http://tech.patientslikeme.com/2010/09/10/deconstructing-my-favorite-sass-mixin/

.dropdown-inner {
  -moz-border-radius: 0 3px 3px 3px;
  -webkit-border-radius: 0 3px 3px 3px;
  border-radius: 0 3px 3px 3px;
-->#FCF5DE)
-->#000000);
--> bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE))
-->#FCF5DE)
  background-image: linear-gradient(top, #FFFFFF, #FCF5DE)
-->(startColorStr='#FFFFFF', EndColorStr='#FCF5DE')
}

.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)
-->#FCF5DE)
-->#000000);
--> bottom,color-stop(0, #FFFFFF),color-stop(1, #FCF5DE))
-->#FCF5DE)
  background-image: linear-gradient(top, #FFFFFF, #FCF5DE)
-->(startColorStr='#FFFFFF', EndColorStr='#FCF5DE')
}

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.

Color Manipulation:

.gray
background-color: fade_out(#000, 0.4)

Will render as:
.gray {
background-color: rgba(0, 0, 0, 0.6);
}

lighten & darken:

.lighter
background-color: lighten(#000064, 30%)

Will render as:
.lighter {
background-color: #4B4BFF;
}

With a variable:

$default_color: #000064
.level1
background-color: $default_color
.level2
background-color: lighten($default_color, 15%)
.level3
.level4
.level5

With a variable:

.level1 {
background-color: #000064; }
.level2 {
background-color: #0000b1; }
.level3 {
background-color: #0000fd; }
.level4 {
background-color: #4b4bff; }
.level5 {
background-color: #9797ff; }

Simple math:

$container_width: 1000px
$photo_width: 480px
.caption
width: $container_width - $photo_width

Will render as:
.caption {
width: 520px;
}

https://github.com/adarowski/The-Hall-of-wWAR

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

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

We need
padding-left
and width.

The mixin:

@mixin bar($start,$end)
$start_value: $start - 1870
margin-left: ($start_value*8) + px
$length: $end - $start
width: ($length*8) - 4px

The mixin:

$start_value: $start - 1870 Pass in
margin-left: ($start_value*8) + px arguments for
start and end
year.
width: ($length*8) - 4px

The mixin:

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

The mixin:

$start_value: $start - 1870 Multiply
$start_value by
8 to get the left-
$length: $end - $start margin (8 pixels
width: ($length*8) - 4px per year).

The mixin:

$start_value: $start - 1870 Career $length
will be used to
determine the
$length: $end - $start width of the
width: ($length*8) - 4px box.

The mixin:

$start_value: $start - 1870 Again, multiply
margin-left: ($start_value*8) + px by 8 to get the
width, and also
subtract 4 pixels
width: ($length*8) - 4px (padding).

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

The magic:

#jbagwell
+bar(1991, 2005)

Will render as:
#jbagwell {
margin-left: 968px;
width: 108px;
}

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

Installation
$ sudo gem install haml

c:> ruby gem install haml

Resources
• sass-lang.com
• beta.compass-style.org
• @sasswatch
• wiseheartdesign.com/weblog/
• rubyinstaller.org (windows)
• github.com/adarowski
• github.com/jayroh

Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version) (20)

Recently uploaded (20)

Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)