BILL Hour: Try something new! (like Sass or Compass)

The Ever-Expanding Interwebz or “why you need to try guacamole”

The guacamole mystery

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff.

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day.

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital.

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time • Worst case scenario: method doesn’t work and we move on to something else

The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time • Worst case scenario: method doesn’t work and we move on to something else • It’s just plain fun!

What is Sass?

What is Sass?It’s just plain ol’ CSS

On ‘ROIDS!

Seriously though. Sass...

Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself)

Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad.

Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad. • Is compiled on-the-ﬂy through the command line or through a GUI application.

Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad. • Is compiled on-the-ﬂy through the command line or through a GUI application. • Most importantly, has room for growth and allows us to make better websites much faster.

Okay, cool. What’s different?

Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way.

Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-ﬂy miniﬁcation. Let the compiler do the work for you and minify your code.

Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code. • The compiler has numerous configuration settings to make your CSS hotter than flapjacks.

Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code. • The compiler has numerous configuration settings to make your CSS hotter than flapjacks. • New features like variables, nestings, mixins, selector inheritance, and color modification.

Variables

Variables Change it once and for all.$mainColor: #FF6600; h1 { color: #FF6600;h1 { }color: $mainColor;}

Variables Change it once and for all.$mainColor: #FFCC00; h1 { color: #FFCC00;h1 { }color: $mainColor;}

Variables

Variables Mathematics, good sir!h1 { h1 {margin: (16px / 2); margin: 8px;width: (200px * 4); width: 800px;} }

Variables

Variables Combine you crazy developer, you!$wrapper: 960px; h1 { margin: 8px;h1 { width: 480px;margin: (16px / 2); }width: $wrapper / 2;}

Nesting

Nesting #stop .doing .this #stuff > .okay?.sidebar { .sidebar {width: 500px; width: 500px; h1 { } color: blue; .sidebar h1 { } color: blue;} }

Nesting

Nesting Don’t go overboard, though. Your styles should NOT be location dependent.

Nesting Don’t go overboard, though. Your styles should NOT be location dependent. Use wisely and with intention.

Mixins

Mixins Recycle, reduce, and argue?@mixin rounded($radius) { .box {-moz-border-radius: $radius; -moz-border-radius: 10px;border-radius: $radius; border-radius: 10px;} }.box {@include rounded(10px);}

Mixins Arguments are great to keep your CSS from repeating yourself.

Selector Inheritance

Selector Inheritance Inherit other properties without duplication.message { .message, .error {border-width: 1px; border-width: 1px;border-style: solid; border-style: solid;} }.error {@extend .message; .error {color: red; color: red;} }

Colors

Colors The prism meets the english teacherh1 { h1 {background: lighten(#CC0, 25%); background: #ffff4d;color: darken(#FFCC00, 10%); color: #cca300;} }h2 { h2 {background: desaturate(red, 15%); background: #ec1313;color: saturate(#855, 20%); color: #9e3f3f;} }

Colors

Colors Many, many more like:

Colors Many, many more like: hue

Colors Many, many more like: hue invert

Colors Many, many more like: hue invert complement

Colors Many, many more like: hue invert complement grayscale

Colors Many, many more like: hue invert complement grayscale alpha

Colors Many, many more like: hue invert complement grayscale alpha opacify?

Colors Many, many more like: hue invert complement grayscale alpha opacify? transparentize?!

Other Sass-y Things (Couldn’t help myself)

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up.

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not?

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request.

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request. • This means you can create “partials”.

Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request. • This means you can create “partials”. • Numerous other features

Great! How do we use this thing?

Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways.

Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difﬁcult, don’t be scared.

Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difﬁcult, don’t be scared. • Menu bar application (Compass.app ~$7)

Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difﬁcult, don’t be scared. • Menu bar application (Compass.app ~$7) • More setup, but greater payoff. Don’t let new things scare you.

Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difﬁcult, don’t be scared. • Menu bar application (Compass.app ~$7) • More setup, but greater payoff. Don’t let new things scare you. • Caveat: Can’t have some of the team editing .css docs on a project while the rest of the team edits .scss/.sass ﬁles. It’s all or nothing

When can we start using this?

When can we start using this? Today, silly!

When can we start using this? Today, silly! It just takes communication.

What is Compass?

What is Compass?An open-source CSS authoring framework!

What is Compass?An open-source CSS authoring framework! (Sass with more features)

Features of Compass

Features of Compass • Sass targets CSS while Compass targets CSS/HTML workﬂow.

Features of Compass • Sass targets CSS while Compass targets CSS/HTML workﬂow. • Compass makes repetitive bits of information easier to repeat.

Features of Compass • Sass targets CSS while Compass targets CSS/HTML workﬂow. • Compass makes repetitive bits of information easier to repeat. • Makes writing CSS3 easier and less pain-staking.

Quiz Time

Quiz TimeHow many browser preﬁxes are there to create a linear background gradient?

Using CSS3

Using CSS3background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%);

Using Compass

Using Compass@import "compass";.box {@include background(linear-gradient(#FFF, #000));}

background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%);

background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%); ta-da!

Border Radius with CSS3

Border Radius with CSS3 -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;

Using Compass

Using Compass @import "compass"; .box { @include border-radius(10px); }

-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;

-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px; ta-da!

Other Compass Additions

Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset

Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset • Can take multiple images, combine them into a sprite, and give you classes and coordinates for each one. Insane.

Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset • Can take multiple images, combine them into a sprite, and give you classes and coordinates for each one. Insane. • Much, much more

We meet again, avocado

We meet again, avocado • Technology is changing rapidly

We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out.

We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out. • If it tastes delicious works out, great! If not, hey, we gave it a shot and we learned something new anyway.

We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out. • If it tastes delicious works out, great! If not, hey, we gave it a shot and we learned something new anyway. • Try something new and make something happen.

BILL Hour: Try something new! (like Sass or Compass)

by Reusser Design, LLC on Sep 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 199

Statistics

BILL Hour: Try something new! (like Sass or Compass) — Presentation Transcript