Post on 27-Jan-2015
description
Who are you man?
@AlmogBaku nice to meet ya`
1. Lean entrepreneur2. CEO at GoDisco
3. Web developer for almost 9 years
http://www.AlmogBaku.com
What are we going to talk about?
•Why traditional CSS is sucks?•Say hello to Sass!•How to Sass? (and compass! dah?)
•Sass with Drupal!
Why traditional CSS is sucks?
Okay.. seriously!:
1. Developing is SLOW!2. Its repetitive3. It really messy and hard to understand4. Not really reusable5. Hard to collaborate
What can we do about it?
Sass is the awesome one!Syntactically Awesome StyleSheets
(really!)
1. Compass2. Popularity / huge community3. It’s written on ruby4. It’s the future!
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.
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!
Say hello to Sass: Even more!
You do even more!:
• Loops• If statements• Color manipulation• Plugins
Say hello to Sass: Compiling
1. Automatic minification2. Automatic aggregation (using @import)
3. Compiling is really easy!1. The cool geeky way - using command line2. Using GUI software such as Scout (yakk!)
How to sass?
SCSS is quite simple right?..
But we are hungry for more!..
Meet CompassCompass is a framework for using sass..
Compass
Compass allow us to do much more with sass:1. Cool built-in mixings
2. Automated sprites!
3. Powerful CLI
4. Reset CSS5. Much more..
Compass: mixins1. 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..
• TypographyHorizontal list, delimited list, text replacement, and much more
• More..
Zurb Foundation
• Foundation is front-end framework• Built on top of sass/compass• Help you build fast prototyping
Workflow & production
• Compiling is actually easy! just one command
For developing phase:
(will watch for every change in your files, than compile)
For production phase:
~$ compass watch
~$ compass compile -e production --force
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.