This document provides an introduction to Sass and Compass, beginning with an explanation of why traditional CSS has limitations. It then discusses the benefits of Sass such as variables, nesting, mixins and more. Compass is introduced as a framework that builds on Sass and provides additional functionality like sprites and mixins. The document also briefly covers using Sass with Drupal and production workflows.
7. Why traditional CSS is sucks?
Okay.. seriously!:
1.
2.
3.
4.
5.
Developing is SLOW!
Its repetitive
It really messy and hard to understand
Not really reusable
Hard to collaborate
8. What can we do about it?
“I wish we just have a tool to
program css…”
10. What can we do about it?
Sass is the awesome one!
Syntactically Awesome StyleSheets
(really!)
1.
2.
3.
4.
Compass
Popularity / huge community
It’s written on ruby
It’s the future!
11.
12. Say hello to Sass
• Actually – sass is dead, but we use in version 2 of sass: SCSS
• SCSS extends regular CSS.. So- you can just paste your old css.
25. Say hello to Sass: Import
Multiple files compiled to one file!
Tip!:
files with underline prefix such as “_components.scss”
will not compile, and will use as asset!
26. Say hello to Sass: Even more!
You do even more!:
•
•
•
•
Loops
If statements
Color manipulation
Plugins
27. Say hello to Sass: Compiling
1. Automatic minification
2. Automatic aggregation (using @import)
3. Compiling is really easy!
1. The cool geeky way - using command line
2. Using GUI software such as Scout (yakk!)
32. Compass
Compass allow us to do much more with sass:
1. Cool built-in mixings
2. Automated sprites!
3. Powerful CLI
4. Reset CSS
5. Much more..
33. Compass: mixins
1. Powerful built-in mixins!
2. Built-in mixing are cross-browser!
No need to care about “-moz” or “-webkit”..
• CSS3 mixins:
Border-radius, gradients, text-shadow, box-shadow, opacity, and much more..
• Helpers:
Font-types, colors, image dimensions, and much more..
• Typography
Horizontal list, delimited list, text replacement, and much more
• More..
36. Susy
Susy is an compass plugin
Susy made responsive grids easy!
37. Zurb Foundation
• Foundation is front-end framework
• Built on top of sass/compass
• Help you build fast prototyping
38. Workflow & production
• Compiling is actually easy! just one command
For developing phase:
~$ compass watch
(will watch for every change in your files, than compile)
For production phase:
~$ compass compile -e production --force
39. For Drupal
• With ruby(command line): Just as usual
• Zen theme(theme framework) already use sass!
• Sasson – Israeli open source theme, will help you develop rapid sass
for Drupal.
41. Thank you!
Do you define yourself as “pro” developer?
Heard about AngularJs? Symfony2? And all the heavy stuff?
If you’re young, cool guy/pal, and looking for adventures.. We are looking for you!