Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Post on 28-Jan-2015
117 Views
Preview:
DESCRIPTION
Transcript
Sassive AggressiveUsing Sass to make your life easier
Who?
Adam DarowskiWeb Developer, PatientsLikeMe
Joel OliveiraDeveloper, The47th
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; } } } } }}
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; } } } } }}
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!
--> Denotes “not a real line break”
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:
--> 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; -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”
Math
.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:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
$start_value is the difference between the
start year and 1870.
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
Multiply $start_value by 8 to get the left margin (8 pixels
per year).
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
Career $length will be used to determine the width of the
box.
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
Again, multiply by 8 to get the width, and also
subtract 4 pixels (padding).
The mixin:
@mixin bar($start,$end) $start_value: $start - 1870 margin-left: ($start_value*8) + px $length: $end - $start width: ($length*8) - 4px
#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:
https://github.com/adarowski/The-Hall-of-wWAR
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...
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
Joel @jayroh
Adam @adarowski
Questions?
top related