Structure Your SASS BADcamp 2013

  • Published on

  • View

  • Download

Embed Size (px)


So you've heard of SASS, maybe you're using it already. Look how pretty it makes your code! That is until you get a list, in a block, that comes from a view, that also uses some mixins and a media query. How does the SASS code structure fit in with your Drupal theme? What if you want to use your own grid? Should you put those rules in a separate stylesheet or maybe a partial? (Wait, what's a partial??) This session will cover: - How to most effectively use SASS variables, mixins, extends, partials, and more - An intro to how the popular Zen base theme uses SASS out-of-the-box - How to use SASS to make your theme (and your design!) more semantic - An intro to SMACSS (Scalable and Modular Architecture for CSS) - How to easily go from prototype to theme, without duplicating your work And will raise even more questions, such as: - Where did all these media queries come from? And.. - Where did my line numbers go and how do I get them back?! The target audience is proficient in CSS and interested in making the most out of the SASS (Syntactically Awesome Stylesheets) for their next Drupal theme or project.


  • 1. Structure Your SASS Github Twitter}penguininja

2. CSS: Whats the Problem? Coding Standards Predictability Reusability Semantic Markup 3. Enter SMACSS (Scalable and Modular Architecture for CSS)Jonathan Snook : 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 markupSemantic Class Names : 7. Make it Better with SASS Semantic Grids Zen Grids The Semantic Grid System Simple Semantic Grid : 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. Dont Panic! 16. Questions? Github Twitter}penguininja