Download - Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)

Sassive AggressiveUsing Sass to make your life easier

Who?

Adam DarowskiWeb Developer, PatientsLikeMe

Joel OliveiraDeveloper, The47th

http://patientslikeme.com/

http://patientslikeme.com/

http://the47th.com/

http://the47th.com/

What is Sass?

What is Sass?

sass-lang.com

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

<rant>

Sass came first

body background-color: #fff color: #000 font: 16px/1.6 Georgia margin: 0

SCSS came next

body { background-color: #fff; color: #000; font: 16px/1.6 Georgia; margin: 0;}

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

ol { @include sans-serif-font(24px, $heading-color); list-style: decimal; max-width: 480px; p { font-size: 16px; margin: 1em 0; } } } } }}


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

Sass > SCSS

</rant>

Let’s talk about:

1.Nesting2.Mix-ins3.Organization and Refactoring4.Math5.Wrapping Up

Nesting

Mix-ins

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

.foo { property: value; property: value; property: value; -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; -webkit-border-radius: 10px; border-radius: 10px;}

When using Sass…

.foo +border_radius(10px)

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

Will render as:

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

The mixin:

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

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

Another example:

Will render as:

@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

Or, pre-populate the mixin:

--> Denotes “not a real line break”

.foo +box_shadow

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

Now, no argument is needed:

Will render as:

Or, you can override:

.foo +box_shadow(2, 2, 10, #CCC)

.foo { -moz-box-shadow: 2px 2px 10px #CCC; -webkit-box-shadow: 2px 2px 10px #CCC; box-shadow: 2px 2px 10px #CCC;}

Will render as:

.foo +box_gradient(#FFFFFF, #000000)

.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')}

Gradients!


Will render as:

http://css3please.com/



@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')

The mixin:


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

.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')}

.dropdown-inner +border_radius(0 3px 3px 3px) +box_shadow(1, 1, 4, #CCC) +box_gradient(#FFFFFF, #FCF5DE)

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

More with mixins:

Organization & Refactoring

“.Class Soup”

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

.faded { background-color: rgba(0, 0, 0, 0.6);}

Color Manipulation:

Will render as:

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

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

lighten & darken:

Will render as:

.comp background-color: complement(#000064)

.comp { background-color: #646400;}

complement

Will render as:

$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%)

With a variable:

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

With a variable:

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

.caption { width: 520px;}

Simple math:

Will render as:

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: 0li cursor: pointer margin: 0 0 5px padding: 0 display: block padding: 2px color: white position: relative

We needmargin-leftand width.

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

The mixin:

Pass in arguments for start and end

year.

The mixin:


$start_value is the difference between the

start year and 1870.

The mixin:


Multiply $start_value by 8 to get the left margin (8 pixels

per year).

The mixin:


Career $length will be used to determine the width of the

box.

The mixin:


Again, multiply by 8 to get the width, and also

subtract 4 pixels (padding).

The mixin:


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

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

The magic:

Will render as:

#canson { margin-left: 8px; width: 204px; }#jorourke { margin-left: 16px; width: 164px; }#pgalvin { 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; }#sthompson { margin-left: 120px; width: 164px; }

Repeat:

Wrapping Up

Installation$ sudo gem install haml

c:\> ruby gem install haml

$ sass --watch ./sass/:./css/ # all .sass files compiled into ./css $ sass --update \sass/style.sass:css/style.css# ... style.sass => style.css

Compiling?

Compiling?... on the what?

blech...

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

Compress / Minify

Resources

• sass-lang.com

• beta.compass-style.org

• @sasswatch

• wynn.fm/okc - @pengwynn

• rubyinstaller.org (windows)

• github.com/adarowski

• github.com/jayroh

http://wiseheartdesign.com/weblog/




http://rubyinstaller.org/

http://rubyinstaller.org/

https://github.com/adarowski




Joel @jayroh

Adam @adarowski

Questions?

Download - Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)

Top Related