This is an inspirational session for theme designers/developers. Code will be shown but this is not a how-to session on programming with Compass/Sass/CSS, for that session please visit: http://2013.drupalcampla.com/sessions/getting-sassy-css Remember the promise of the Color module? The Color module ships with Drupal core and allows a site owner to tweak the colors of their theme through a simple UI, but the problem is not all themes support this feature and normal people pick ugly colors! This is where Compass can really help. By leveraging the power of Compass & Sass, any contrib Drupal theme can become smarter and prettier. The result is a better experience for those who download and use contrib themes in their Drupal sites.

1. Please use Compass/Sass for Themes
If I may… And other whys answered.
!
!
by Chris Charlton http://xtnd.us

2. For & Against
2

3. Preaching to the choir here.
Arguments For
‣ Write and maintain less code.
‣ Easily generate aesthetically pleasing color schemes.
‣ Wonderful, easy support for bitmap & vector graphics.
‣ Be dynamic and responsive (not in the mobile sense).
‣ Evolve.
3

4. You’re that guy.
Arguments Against
‣ “It’s just another thing to learn.”
‣ “What’s wrong with regular CSS?”
‣ “What if the user doesn’t know Sass?”
‣ “It was trouble to get PHP running, now I need Ruby?!”
‣ “Sass has too many files. One CSS file is all I need!”
4

5. For
5

6. Even your first Sass theme will feel good. Imagine you, but 2.0
Write less code
‣ Nesting, Variables, Mixins, [stupid] Vendor prefixes, etc.
‣ Sub-themes and variants are tiny.
‣ CSS output control; scrubbed, minified, and compressed.
‣ New modular styles answer where to organize things.
6

7. 7
$white : #FFFFFF;
$light : #EEEEEE;
$dark : #666666;

8. 8
theme/layout/grid.scss
theme/modules/buttons.scss
theme/modules/callouts.scss
theme/base.scss

9. Don’t let programmers choose colors.
Color
// Sass
mix(...); // Mix two colors
complement(...); // Complementary
invert(...); // Invert color
// Compass
shade(...); // Darken
tint(...); // Lighten
contrasted(...); // Smart
// “compass-colors” gem provides more
9

10. It’s “mind bottling.”
Great bitmap & vector graphics support
‣ Auto-generate Image Sprites from image folders
‣ Leverage dynamic vector and graphic functions.
‣ Leverage CSS3 effects & graphics capabilities
• shapes, masks, rounded corners, shadows, glows, gradients
10

11. 11
.element {
// Find image by name
background-image: image-url("icon.png");
}

12. 12
$image: url("images/example.png");
!
.element {
// No need to hardcode image sizes
height: image-height($image);
}

13. 13
// Output green spritesheet + classes
@import "images/green/*.png";
@include all-green-sprites;
!
!
// Output blue spritesheet
@import "images/blue/*.png";
!
.element {
@include background(blue-sprite(icon));
height: blue-sprite-height(icon);
width: blue-sprite-width(icon);
}

14. True Sass Ninjas cuts three columns in one swipe.
Be dynamic! (Responsive is in next slide)
‣ Conditional logic for dynamic column styles.
‣ Centralizing colors (and images) makes for easier, and
better customization. Maintenance profit.
‣ Leverage Sass mixins & functions to reproduce graphics
to eliminate shipping with resolution-limited bitmaps.
‣ CSS3 animations & transformations bring themes alive!
14

15. Mobile - BOOM!
Now be RESPONSIVE
‣ This is your next frontier when done with Sass basics.
‣ Good excuse to buy that tablet or any other device.
‣ Motivation to use SVG along with PNG.
15

16. CSS3 - BOOM!
Build on top of CSS3
‣ This is the new frontier in standards compliance.
‣ Another good excuse to buy that new tablet/device.
‣ Another excuse to use SVG along with PNG.
16

17. Fin
17