This document discusses using SASS to improve on SMACSS principles for organizing CSS. It recommends using SASS features like mixins, partials and nested media queries to increase reusability, reduce file size and improve organization. Semantic class names and semantic grids are also suggested to allow cleaner, more maintainable CSS code and increase control over markup. The overall message is that SASS can help address issues with non-semantic classes and limited control over markup when using SMACSS alone.

1. Structure Your SASS
Drupal.org
Github
Twitter
}
penguininja

2. CSS: What’s the Problem?
●
●
●
●
Coding Standards
Predictability
Reusability
Semantic Markup

3. Enter SMACSS
(Scalable and Modular
Architecture for CSS)
Jonathan Snook : smacss.com

4. SMACSS Basics
● General to Specific
● Identify Patterns
● Modules as Standalone
Components
● Increase Semantics

5. SMACSS Organization
1.
2.
3.
4.
5.
Base
Layout
Module
State
Theme

6. Still Some Issues...
● Non-Semantic Classes
● Not enough control over
Drupal markup
Semantic Class Names : css-tricks.com/semantic-class-names

7. Make it Better with SASS
Semantic Grids
Zen Grids
zengrids.com
The Semantic Grid System
semantic.gs
Simple Semantic Grid : github.com/penguininja/simple-semanticgrid

8. Semantic Grids
$max-width: 960px;
article {
@include column(9);
}
aside {
@include column(3);
}

9. Make it Better with SASS
Use Mixins
● Increased Reusability
● Cleaner Module Code
● Style Tile Integration

10. Make it Better with SASS
Use Partials to Reduce
Number of Stylesheets
While Staying Modular

11. SASS Partials
@import “base”;
@import “layout”;
@import “navigation”;
@import “widget”;

12. Make it Better with SASS
● Nest Media Queries
● Group All Module Styles
Together

13. Media Queries
.widget {
width: 50%;
}
@media screen and (max-width: 600px) {
width: 100%;
}

14. Example: Zen 5.4

15. Don’t Panic!

16. Questions?
Drupal.org
Github
Twitter
}
penguininja