finding your way with sass+compass

finding your waywith sass+compass

ben@cornershopcreative.com

WHAT IS SASS?

Sass is a CSS Pre-processoror meta-language

Sass is a “competitor” to LESS and Stylus

Sass is written in Ruby

Sass is pretty cool

WHAT IS COMPASS?

Compass is an open-source library of Sass mixins.

Compass is a CSS authoring framework.

Compass is what makes Sass really, really useful.

WHAT SASS DOES

Introduces new things to CSS:• nested rules• variables• mixins• inheritance• and much more!

GETTING GOINGin your development environment*

* you don’t need sass on prod!

STEP BY STEP

1.Install ruby (I use rvm) $ \curl -L https://get.rvm.io | bash -s stable --ruby

2.Install the compass “gem”$ gem update --system$ gem install compass

3.Install compass-normalize (optional)$ gem install compass-normalize

4.Confirm installation$ compass version

STEP BY STEP

5. Set up a project! $ compass create <foldername> ...or... $ compass install compass --syntax sass

live demo time!

PROBLEMS?http://compass-style.org/install/ is your friend

TWO SYNTAXESSASSSCSS

.selector { color: green; border:1px solid $black; @include inline-block; li { display: block; font: family: $sans; size: 122%; }}

.other-selector {}

.selector color: green border:1px solid $black +inline-block li display: block font: family: $sans size: 122% @extend .navitem

.other-selector

THE PROCESS

1.Write your Sass

2.Compile your Sass into CSS

3.Include your CSS on prod

4.Bask in glory

LET’S TRY ITshowing is better than telling, right?

WE JUST COVERED

Compiling Sass files with compass watch and compass compile

Using @imports and underscoresto control our content

Mucking with config.rb

VARIABLES & MIXINSand some math, just for fun!

VARIABLES $sans: “Helvetica Neue”, Helvetica, Arial, sans-serif$display: “Lobster”, Impact, serif $tiny: Verdana, sans-serif $evil: Comic Sans, sans-serif $where: left $radius: 5px $base: 14px

$dark: #222 $light: #fff$seethru: rgba($light, 0.2) $grey: $dark + #444 //or lighten($dark, 40%) $red: #971219

doing this in _variables.sass is a good idea

VARIABLES IN ACTION!.redtext color: $red

articlefont:

family: $sanssize: $base

color: $darkbackground-color: $seethruh1 font: #{$base * 2}/#{$base * 2.2} $display @extend .redtext &.title text-transform: uppercase

.#{$where}-rail width: 200px

MIXINS=notext overflow: hidden white-space: nowrap text-indent: 105% text-align: left

=float( $dir: left ) float: $dir @if $dir == left margin: 0 10px 5px 0 @else margin: 0 0 5px 10px

.alignleft +float(right)

ENTER COMPASSmixin magic and more

CROSS-BROWSER STUFF+opacity(0.6)

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);opacity: 0.6;

+inline-block display: -moz-inline-stack;display: inline-block;vertical-align: middle;*vertical-align: auto;zoom: 1;*display: inline;

MOAR CROSS-BROWSER

+opacity(0.6)

+clearfix

+legacy-pie-clearfix

+text-shadow(1px 2px 8px rgba(black, 0.3))

+box-shadow(inset 2px 4px 10px $red)

+border-radius(8px)

+box-sizing(border-box)

FANCY CSS3 = EASY!

+single-transition(all, 0.3s, ease)

+rotate(20deg)

+scale(1.2)

+background-image(linear-gradient(top, $red, $red - #222))

http://compass-style.org/reference

SPRITES FTW

THE PROCESS

1.Create a sub-directory in /images/

2.Save your sprite png’s in there

3.Tell Compass to create classes

4.Celebrate

EXAMPLE// gives us .mysprites-[filename]@import "mysprites/*.png"$mysprites-sprite-dimensions: true //sets dimensions+all-mysprites-sprites

/* so if images/mysprites/logo.png is 200x100, then....mysprites-logo width: 200px; height: 100px; background: url(images/mysprites-3434034734.png) no-repeat; background-position: [whatever] [whatever];*/

h1#logo @extend .mysprites-logo

OTHER STUFFrandom other tricks

WELL THAT’S HANDYh1font-size: 40px@media screen and (max-width: $break-small) font-size: 30px

a.heading background-image: image-url(‘filename.jpg’) &:hover +scale(1.1) .no-csstransforms &:hover text-decoration: underline

$fullwidth: 960px.rail width: percentage(220px/$fullwidth) margin: percentage(10px/$fullwidth)

FOR MORE...

http://sass-lang.com

http://compass-style.org

http://www.kaelig.fr/bettersassdocs/

http://thesassway.com

CONNECT

Ben Byrne

ben@cornershopcreative.com

facebook.com/drywall

Twitter: @drywall