finding your waywith sass+compass
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
facebook.com/drywall
Twitter: @drywall
Recommended
