+
+
Sass
+ +
+
What is Sass?
+ +Its a preprocesor
+ +
+
What does it do?
+ +-
+
- Variables
$foo
+ - Mixins
@mixin
+ - Functions +
- Selector Inheritance
@extend, &
+ - Control Directives
@if, @for, @each, @while
+ - Its a language! +
+
+
+
+
+
+
Variables
+ + $foo : #fffff;
+ $bar : (1px * 2em) / 4px;
+
+
+
+
+
+
+
+
Functions and Mixins
+ +@function get-stops($colors, $stops) {
+ $out:();
+ @each $color in $colors {
+ $i: index($colors, $color);
+ $stop: 0% + nth($stops, $i);
+ $out: append($out, $color $stop, 'comma');
+ }
+ @return $out;
+}
+
+@mixin menu-level2-active {
+ $args: get-stops($menu-active-colors, $menu-active-stops);
+ @include background(linear-gradient($menu-active-direction, $args));
+}
+
+
+
+
+
+
+
+
Inheritance
+ +a {
+
+ color : $link-color;
+
+ &:hover {
+ color : $link-hover-color;
+ }
+
+}
+
+
+
+
+
+
+
+
+
Extend
+ +.foo {
+ font-size : 10px;
+}
+
+.bar {
+ @extend .foo;
+}
+
+.foo, .bar {
+ font-size : 10px;
+}
+
+
+
Best Practices
+ +
+
Colors
+ +
+
+
+
+
+
+
This is bad
+ +$orange : rgb(138, 182, 225) !default;
+$blue : rgb(33,89,167) !default;
+$lighter-blue : rgb(138, 182, 225) !default;
+$gray : rgb(63,63,63) !default;
+$dark-gray : rgb(33,33,33) !default;
+$light-gray : rgb(109,109,109) !default;
+$lighter-gray : rgb(150,150,150) !default;
+$lightest-gray : rgb(188,188,188) !default;
+
+.foo {
+ color : $blue;
+}
+
+
+
+
+
+
+
+
This is ok, but we can do better
+ +// dark gray
+$text-color : rgb(33,33,33) !default;
+// lightest gray
+$text-compliment-color : rgb(188,188,188) !default;
+//h1, h2
+$title-color : rgb(63,63,63) !default;
+// blue
+$primary-accent-color : rgb(33,89,167) !default;
+// blue on dark
+$primary-accent-compliment-color : rgb(138, 182, 225) !default;
+//orange - link color
+$secondary-accent-color : rgb(199, 105, 0) !default;
+// light gray
+$ancillary-color : rgb(109,109,109) !default;
+// lighter gray
+$ancillary-compliment-color : rgb(150,150,150) !default;
+
+
+
+
+
+
+
+
Pallets
+ +// _pallet.scss
+$orange : rgb(138, 182, 225) !default;
+$blue : rgb(33,89,167) !default;
+$lighter-blue : rgb(138, 182, 225) !default;
+$gray : rgb(63,63,63) !default;
+$light-gray : rgb(109,109,109) !default;
+$lighter-gray : rgb(150,150,150) !default;
+$lightest-gray : rgb(188,188,188) !default;
+
+// _colors.scss
+//text
+$text-color : $dark-gray;
+$text-compliment-color : $lightest-gray;
+$title-color : $gray;
+$primary-accent-color : $blue;
+$primary-accent-compliment-color : $lighter-blue;
+$secondary-accent-color : $orange;
+$ancillary-color : $light-gray;
+$ancillary-compliment-color : $lighter-gray;
+
+
+
Only use your pallet colors to define your more descriptive color variables!
+ +
+
Variables Definitions
+ +
+
+
+
+
+
+
// There are 100 lines before this
+.content_head {
+ @include clearfix;
+
+ .hr {
+ $height : 2px;
+ padding-top : (rhythm(1) / 2) - $height;
+ width : 100%;
+ border-bottom : $height solid $secondary-accent-color;
+ margin-bottom : 10px;
+ display : block;
+ @extend .float-right;
+ }
+
+ .release_identifiers {
+ @extend .float-right;
+ text-align : right;
+ font-family : $ancillary-font;
+ }
+}
+
+
+
Always define your variables at the top of each file!
+ +
+
-
+
- Easy to find +
- Easy to update +
- No suprises +
+
+
+
+
+
+
/* Local Variaibles */
+$release-content-width : 760px;
+$release-content-border-size : 6px;
+$release-content-top-margin : 9px;
+$release-content-height : rhythm(2);
+
+$section-side-width : column-width(4);
+$section-side-height : 24;
+$section-side-li-padding : 10px;
+
+$control-border-height : 1px;
+$control-box-height : 2;
+$control-top-box-leader : 1;
+
+$group-image-height : rhythm(6);
+
+.contents .show {
+ h1 {
+ @include header(3);
+ @include trailer;
+ color : $primary-accent-color;
+ }
+ // ... goes on for 100+ lines
+
+
+
Math
+ +Is your best friend
+ +
+
Almost every thing a designer does can be converted into some sort of mathmatical layout... ALMOST
+ +
+
+
+
+
+
+
Layout
+ +$wrapper-width : 960px;
+$sidebar-width : 50px;
+$main-content-width : $wrapper - $sidebar;
+
+.wrapper {
+ width : $wrapper-width;
+}
+
+.sidebar {
+ width : $sidebar-width;
+}
+
+.content {
+ width : $main-content-width;
+}
+
+
+
+
+
+
Ranges
+ +@for $i from 1 through 4 {
+ h#{$i} {
+ @include header($i);
+ }
+}
+
+
+
+
+
+
Image demensions
+ +.play {
+ left: ($width / 2) - (global-sprite-width(play_movie) / 2);
+ top: ($height / 2) - (global-sprite-height(play_movie) / 2);
+}
+
+
+
Inheritance
+ +
+
Inception rule!
+ +
+
+
+
+
+
+
+
Well you can but it gets messy
+ +.foo {
+ width: 5px;
+ .bar {
+ height: 20px;
+ .baz {
+ color : red;
+ .what-comes-after-baz {
+ border : green solid 1px;
+ &.something {
+ @extend .float-left;
+ }
+ }
+ }
+ }
+}
+
+
+
And slow
+ +
+
+
+
+
Selector layout
+ +.release_title a{
+ @extend h3;
+ @include adjust-font-size-to(20px, 1);
+ @include trailer;
+
+ text-decoration : none;
+ display : block;
+
+ &:hover {
+ color:$hover-color;
+ }
+}
+
+
+
Compass
+ +http://compass-style.org
+ +
+
-
+
- Stylesheet framework +
- Considered sass standard library +
- Standalone application +
- Has the ability to have application integrations (rails, django, etc.) +
+
Currently the only application integration supported by the core team is rails
+ +
+
Features
+ +-
+
- Sprites +
- CSS3 +
- Layout tools +
- And much more +
+
Sprites!
+ +
+
-
+
- Fewer http requests. +
- You don't have a bunch of individual images to manage. +
- Customizable +
- ITS EASY! +
+
+
+
+
+
+
This EASY!
+ +@import "my-icons/*.png";
+@include all-my-icons-sprites;
+
+
+
+
+
+
+
+
BAM!
+ +.my-icons-sprite,
+.my-icons-delete,
+.my-icons-edit,
+.my-icons-new,
+.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
+
+.my-icons-delete { background-position: 0 0; }
+.my-icons-edit { background-position: 0 -32px; }
+.my-icons-new { background-position: 0 -64px; }
+.my-icons-save { background-position: 0 -96px; }
+
+
+
Layouts
+ +-
+
- Vertical (default) +
- Horizontal +
- Diagonal +
- Smart +
+
Magic Selectors
+ +-
+
- my-buttons/glossy.png +
- my-buttons/glossy_hover.png +
- my-buttons/glossy_active.png +
- my-buttons/glossy_target.png +
+
+
+
+
+
+
Example
+ +@import "my-buttons/*.png";
+
+a {
+ @include my-buttons-sprite(glossy)
+}
+
+
+
+
+
+
+
+
BAM!
+ +.my-buttons-sprite, a {
+ background: url('/my-buttons-sedfef809e2.png') no-repeat;
+}
+
+a {
+ background-position: 0 0;
+}
+a:hover, a.glossy_hover, a.glossy-hover {
+ background-position: 0 -40px;
+}
+a:target, a.glossy_target, a.glossy-target {
+ background-position: 0 -60px;
+}
+a:active, a.glossy_active, a.glossy-active {
+ background-position: 0 -20;
+}
+
+
+
Beware of your file size!
+ +
+
We support all CSS3 properties with vendor prefix's and new ones are being added all the time.
+ +
+
Layout tools
+ +-
+
- Vertical rhythm +
- Grids +
- And more! +
+
Vertical rhythm
+ +The spacing and arrangement of text as the reader descends the page.
+ +
+
"Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost." - 24ways.org
+ +
+
+
+
+
+
+
+
+
+
We need help!
+ +https://github.com/chriseppstein/compass
+ +-
+
- Documentation +
- Stylesheet cleanup +
- Code Refactoring +
+
Core Team
+ +-
+
- Chris Eppstein +
- Scott Davis (me) +
- Brandon Mathis +
- Eirc Myer (The other one) +
- Anthony Short (newest member) +
+