sassive aggressive: level up your css with sass
DESCRIPTION
As the line between designer and developer continues to blur, we need more from CSS than it can offer. Sass is an extension of CSS that adds basic features CSS is sorely missing (like variables and nesting). But Sass kicks things to a new level with mixins (flexible, re-usable blocks of CSS) and advanced selector inheritance. Simply put, Sass makes CSS authoring fun again.TRANSCRIPT
Sassive Aggressive// Level Up Your CSS with Sass@import the-awesome
What is Sass?
What is Sass?Syntacticallyawesomestylesheets
We all use CSS sucks
We all use CSS sucksbut
We all use CSS sucksbut
Especially if you’ve used Sass.
Sass takes everything that’s missing from CSS
and puts it into CSS.
Sass takes everything that’s missing from CSS
and puts it into CSS.
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}
Things like…
h1 { color: $logo-color; font: 16px/1.6 Georgia; margin: 0;}
Variables
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
Nesting
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; &.new { color: red; }}
The Ampersand
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}h2 { @extend h1; font-size: 14px;}
Selector Inheritance
h1 { color: #000; font: 16px/1.6 Georgia; margin: $default_margin * 2;}
Calculations
h1 { color: lighten(#000, 25%); font: 16px/1.6 Georgia; margin: 0;}
Color Manipulation
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; @include border-radius(4px);}
Mixins
And so, so much more.
Sass does not replace CSS.
Sass does not replace CSS.Sass makes CSS.
Sass does not replace CSS.Sass makes CSS.
better.
Three more thingsbefore we play…
What’s ?http://compass-style.org
• a framework that uses Sass• an open source project• a collection of reusable design patterns that
makes using the latest CSS features super easy
Compass is not Sass, but they are oen grouped together.
1
Two SyntaxesSCSS
2
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
Two SyntaxesSCSS
2
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
Two SyntaxesSCSS booooooo
2
h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
Two SyntaxesSCSS booooooo
DISCLAIMER: Adam’s opinion of the
SCSS syntax do not represent Joel’s
opinion of the SCSS syntax.
2
h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
Two SyntaxesSass
2
h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
Two SyntaxesSass yaaaaaay
2
Don’t be afraid.
The Command Line3
Let’s look at some code!
NOTE: At this point, we switched to a
live code demonstration (with Sass/
SCSS on the left and auto-updating
compiled CSS on the right).
See the code:https://github.com/jayroh/sass-harvard
Note that the code samples are stored within the same !le, but on different branches. Here are the direct links to each branch:
Ampersand (Sass/SCSS)Calculations (Sass/SCSS)
Colors (Sass/SCSS)Compass (Sass/SCSS)
Extend (Sass/SCSS)Loops (Sass/SCSS)
Mixins (Sass/SCSS)Nesting (Sass/SCSS)Partials (Sass/SCSS)Responsive (Sass/SCSS)Sprites (Sass/SCSS)Variables (Sass/SCSS)
Who are these guys?
Adam DarowskiPatientsLikeMe
Joel Oliveirae47th
@adarowski@jayroh