2. Prerequisites
● Strong understanding of
CSS
● Familiarity with control
structures, functions,
variables
● Lazy Desire to
be more Efficient
● Familiarity CSS3
● Interest in Theming
3. What's in it for me?
... Goals
● Understanding of High Level Purpose of
Preprocessing languages
● Learn how to get started
● How this works with Drupal...
Yes, there's a module for that!
5. Why should i use less/sass?
● Web is complex.
No longer simple.
● Front End Performance
● DRY principle
● Frameworks / OOCSS
● Cross-Browser
Compatibility
● It's easy!
6. Gaining Front End Performance
● Reduce HTTP Number of Requests
● Reduce, reuse, and recycle css
● Compress assets
18. Same Syntax: Less / Sass / Compass
● Nested Structures
// less // sass / scss
// @file style.less.css // @file style.scss
body { body {
.header { .header {
background: #fc0; background: #fc0;
} }
} }
19. Same Syntax: Less / Sass / Compass
● Importing files
// less // sass or scss
// @file style.less.css // @file style.scss
@import "file"; @import "foo";
@import 'file.less'; @import "foo.scss";
@import http://foo. @import "http://foo.com/foo;
com/foo; @import url(foo);
@import url(file);
20. Mixin
"Mixins allow you to define styles that can be
re-used throughout the stylesheet without
needing to resort to non-semantic classes like .
float-left. Mixins can also contain full CSS rules,
and anything else allowed elsewhere in a Sass
document. They can even take arguments
which allows you to produce a wide variety of
styles with very few mixins."
- Sass-Lang.com
32. What is compass?
● sass mixin library
● sass meta framework
● reduce low level tasks
How do i install this?
● Install with a rubygem
$ gem install compass
