Scalable SASS

Most of us have experienced how rapidly CSS can spiral out of control, especially in medium to large-sized applications. We’ll be covering the basics of SASS, and how to organize styles in a clean, manageable, scalable way. No more spaghetti CSS and hunting through thousands of lines for that rule you want!

Transcript

1. Scalable SASS By Cara Heacock
2. Let me ask you… • Show of hands! • Have you ever… • Become overwhelmed when your stylesheet becomes long (1000+ lines or more)? • Had trouble finding selectors and rules in your CSS and resorted to Command + F / Control + F? • Forgotten that you styled something already and accidentally wrote the same thing several lines later? !
3. organize I am here to help you your styles!
4. Why I am giving this talk
5. SASS Let’s start with
6. SASS • SASS makes CSS fun! • (Many developers hate CSS, and I don’t blame them) • SASS stands for… • Syntactically Awesome StyleSheets "
7. SASS • Introduces functionality that we are already familiar with in back-end coding: • Variables • Functions • Conditionals • Loops • And more! "
8. Variables $primary-color: #06539d; // blue h1, h2 { color: $primary-color; } .button { // darker blue! background-color: darken($primary-color, 10%); color: #fff; } .sidebar { background-color: $primary-color; font-size: 1.4rem; text-align: center; } SCSS: Compiled CSS: h1, h2 { color: #06539d; } .button { background-color: #043767; color: #fff; } .sidebar { background-color: #06539d; font-size: 1.4rem; text-align: center; }
9. Mixins @mixin make-square($size, $color) { width: $size; height: $size; background-color: $color; } @mixin transform($property) { -webkit-transform: $property; -moz-transform: $property; -ms-transform: $property; transform: $property; } .diamond { @include make-square(50px, #f00); @include transform(rotate(45deg)); } SCSS: Compiled CSS: .diamond { width: 50px; height: 50px; background-color: #f00; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
10. Nesting p { color: #333; } .container { background-color: #eee; h1, p { color: #898989; } p { font-size: 1.2rem; } } SCSS: Compiled CSS: p { color: #333; } .container { background-color: #eee; } .container h1, .container p { color: #898989; } .container p { font-size: 1.2rem; }
11. Partials @import '_global/_variables'; @import '_global/_mixins'; @import '_global/_resets'; @import '_global/_utility'; @import '_global/_global'; @import '_global/_grid'; @import '_global/_typography'; @import '_global/_forms'; @import '_global/_tables'; @import '_global/_media'; @import '_partials/_header'; @import '_partials/_nav'; @import '_partials/_sections'; @import '_partials/_comments'; @import '_partials/_sidebar'; @import '_partials/_pagination'; @import '_partials/_footer'; @import '_pages/_404'; @import '_pages/_home'; @import '_pages/_single'; Contents of main.scss
12. Getting Started with SASS • SASS is magical and can do a lot of things • Knowledge of just variables, mixins, nesting, and partials is enough to get started and CHANGE YOUR LIFE
13. Here’s Your Homework 1. Visit sass-lang.com 2. Click “Documentation” 3. READ THE ENTIRE DOCUMENTATION
14. Here’s Why… • It's not like I'm telling you, “Read the entire Rails documentation.” • There isn't a metric ton of documentation for SASS. • You can learn EVERYTHING about SASS in about 1-2 days. • Maybe 1 day without distractions! #
15. organization Now that we know about SASS… let’s talk about high-level
16. Water Bear Games
17. Organization of Partials @import '_global/_variables'; @import '_global/_mixins'; @import '_global/_resets'; @import '_global/_utility'; @import '_global/_global'; @import '_global/_grid'; @import '_global/_wordpress'; @import '_global/_typography'; @import '_global/_forms'; @import '_global/_tables'; @import '_global/_media'; @import '_partials/_header'; @import '_partials/_nav'; @import '_partials/_loop'; @import '_partials/_comments'; @import '_partials/_sidebar'; @import '_partials/_pagination'; @import '_partials/_footer'; @import '_partials/_theme-sections'; @import '_partials/_puzzle-blog'; @import '_partials/_puzzle-games'; @import '_partials/_puzzle-news'; @import '_partials/_puzzle-one-column'; @import '_pages/_404'; @import '_pages/_single'; @import '_pages/_single-game'; @import '_pages/_single-team'; @import '_plugins/_plugins'; Website: waterbeargames.com | Framework: WordPress
18. Catalog Choice
19. Organization of Partials @import 'font-awesome'; @import '_lib/_catalogchoice-icons'; @import 'jquery.modal'; @import 'jquery.qtip'; @import 'owl.carousel'; @import 'owl.theme'; @import 'owl.transitions'; @import '_abstractions/_variables'; @import '_abstractions/_mixins'; @import '_utility/_grid'; @import '_utility/_transitions'; @import '_utility/_backgrounds'; @import '_utility/_buttons'; @import '_utility/_shadows'; @import '_utility/_widgets'; @import '_utility/_miscellaneous'; @import '_global/_resets'; @import '_global/_global'; @import '_global/_typography'; @import '_global/_forms'; @import '_global/_forms_custom'; @import '_global/_tables'; @import '_global/_media'; @import '_partials/_alerts'; @import '_partials/_avatars'; @import '_partials/_calls_to_action'; @import '_partials/_environmental_savings_report'; @import '_partials/_errors'; @import '_partials/_headers’; @import '_partials/_nav'; @import '_partials/_footer'; @import '_partials/_modals'; @import '_partials/_form_modal'; @import '_partials/_form_one_field'; @import '_partials/_form_small'; @import '_partials/_dropdowns'; @import '_partials/_masquerade'; @import '_partials/_pagination'; @import '_partials/_status'; @import '_layouts/_application'; @import '_layouts/_account'; @import '_layouts/_browse'; @import '_layouts/_dashboard'; @import '_layouts/_profile'; @import '_layouts/_static_page'; @import '_views/_about'; @import '_views/_account_edit'; @import '_views/_catalog_choices'; @import '_views/_catalog_choices_create'; @import '_views/_catalog_choices_new'; @import '_views/_catalog_choices_show'; @import '_views/_catalogs'; @import '_views/_communities'; @import '_views/_donations'; @import '_views/_faq'; @import '_views/_home'; @import '_views/_mailboxes’; @import '_views/_messages'; @import '_views/_names'; @import '_views/_profiles'; @import '_views/_searches'; @import '_views/_statistical_snapshots'; Website: catalogchoice.org | Framework: Ruby on Rails
20. Organization of Partials @import '_global/_variables'; @import '_global/_mixins'; @import '_global/_resets'; @import '_global/_global'; @import '_global/_grid'; @import '_global/_utility'; @import '_global/_typography'; @import '_global/_forms'; @import '_global/_tables'; @import '_partials/_alerts'; @import '_partials/_approval'; @import '_partials/_avatar'; @import '_partials/_comments'; @import '_partials/_errors'; @import '_partials/_footer'; @import '_partials/_header'; @import '_partials/_idea'; @import '_views/_challenges_index'; @import '_views/_challenges_show'; @import '_views/_ideas_new_edit'; @import '_views/_user_sessions_new'; Framework: Ruby on Rails
21. Personal Portfolio
22. Organization of Partials @import '_lib/_fontawesome'; @import '_lib/_lightbox'; @import '_global/_variables'; @import '_global/_mixins'; @import '_global/_resets'; @import '_global/_global'; @import '_global/_text'; @import '_global/_colormagic'; @import '_partials/_clock'; @import '_partials/_nav'; @import '_partials/_back-to-top'; @import '_pages/_home'; @import '_pages/_child'; @import '_pages/_about'; @import '_pages/_portfolio'; @import '_pages/_resume'; @import '_pages/_404'; @import '_global/_media-queries'; Website: caraheacock.com |Framework: Jekyll
23. Organization of Partials • You can adapt the organization of your partials to the needs of your application/framework • Here are some common staples: • _global directory for your overarching styles, such as variables, mixins, overall site layout, utility classes, text, forms, tables, etc. • Optional: move variables and mixins into an _abstractions/_base directory • _partials directory for your elements that appear on multiple pages, such as the header, footer, navigation bar, etc. • _pages/_views directory for page and view specific styles, such as styles that only apply to the home page, about page, a model’s CRUD views, etc. // Example main.scss @import '_global/_variables'; @import '_global/_mixins'; @import '_global/_resets'; @import '_global/_utility'; @import '_global/_global'; @import '_global/_typography'; @import '_global/_forms'; @import '_global/_tables'; @import '_global/_media'; @import '_partials/_header'; @import '_partials/_nav'; @import '_partials/_footer'; @import '_pages/_home';
24. Organization of Partials • How long should your partials be? • 300 lines is pushing it • 500 lines: it's time to break it into smaller partials • If you're having trouble finding something, it's time to break it up
25. Organization of Partials @import 'font-awesome'; @import '_lib/_catalogchoice-icons'; @import 'jquery.modal'; @import 'jquery.qtip'; @import 'owl.carousel'; @import 'owl.theme'; @import 'owl.transitions'; @import '_abstractions/_variables'; @import '_abstractions/_mixins'; @import '_utility/_grid'; @import '_utility/_transitions'; @import '_utility/_backgrounds'; @import '_utility/_buttons'; @import '_utility/_shadows'; @import '_utility/_widgets'; @import '_utility/_miscellaneous'; @import '_global/_resets'; @import '_global/_global'; @import '_global/_typography'; @import '_global/_forms'; @import '_global/_forms_custom'; @import '_global/_tables'; @import '_global/_media'; @import '_partials/_alerts'; @import '_partials/_avatars'; @import '_partials/_calls_to_action'; @import '_partials/_environmental_savings_report'; @import '_partials/_errors'; @import '_partials/_headers’; @import '_partials/_nav'; @import '_partials/_footer'; @import '_partials/_modals'; @import '_partials/_form_modal'; @import '_partials/_form_one_field'; @import '_partials/_form_small'; @import '_partials/_dropdowns'; @import '_partials/_masquerade'; @import '_partials/_pagination'; @import '_partials/_status'; @import '_layouts/_application'; @import '_layouts/_account'; @import '_layouts/_browse'; @import '_layouts/_dashboard'; @import '_layouts/_profile'; @import '_layouts/_static_page @import '_views/_about'; @import '_views/_account_edit'; @import '_views/_catalog_choices'; @import '_views/_catalog_choices_create'; @import '_views/_catalog_choices_new'; @import '_views/_catalog_choices_show'; @import '_views/_catalogs'; @import '_views/_communities'; @import '_views/_donations'; @import '_views/_faq'; @import '_views/_home'; @import '_views/_mailboxes’; @import '_views/_messages'; @import '_views/_names'; @import '_views/_profiles'; @import '_views/_searches'; @import '_views/_statistical_snapshots'; Website: catalogchoice.org | Framework: Ruby on Rails
26. organization Now let’s talk about… ofproperties
27. Organization of Properties Yes, these things .selector { position: absolute; top: 0; display: inline-block; width: 50%; height: 200px; background-color: #eee; color: #6b6b6b; font-family: 'Open Sans', sans-serif; text-align: center; } }
28. Organization of Properties • Show of hands! • Who organizes their properties alphabetically? • Who organizes their properties by type? • Who doesn’t organize their properties? !
29. CSS Tricks Poll Source: https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/ How do you order your CSS properties?
30. Organization of Properties • Not organizing your properties is how you end up writing "color: #fff;" on one line, writing 15 more lines, forgetting you styled color already, and writing "color: #fff;" again $
31. Organization of Properties • We’re going to focus on Group by Type • My personal favorite way of organizing properties which I impose on anyone who's touching my CSS • (I'm kind of possessive of my CSS, sorry not sorry) $
32. Organization of Properties • One helpful way to remember the group by type methodology is that it's generally most important styles to least important styles • Positioning • Display & Box Model • Backgrounds & Colors • Text • Miscellaneous .selector { /* Positioning */ position: absolute; top: 0; right: 0; z-index: 10; /* Display & Box Model */ display: inline-block; overflow: hidden; box-sizing: border-box; width: 100px; height: 100px; margin: 10px; padding: 10px; border: 10px solid #333; /* Backgrounds & Colors */ background-color: #eee; background-image: url("image.jpg"); /* Text */ color: #333; font-family: sans-serif; font-size: 16px; line-height: 1.4; text-align: right; /* Miscellaneous */ cursor: pointer; }
33. Organization of Properties 1. Positioning Where is my element? position: absolute; vertical-align: middle; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
34. Organization of Properties 2. Display & Box Model How big is my element? • “width” before ”height” • “margin”, then “padding”, then “border” display: flex; flex: 0 1 100%; flex-wrap: wrap; overflow: hidden; visibility: visible; width: 100px; max-width: 100%; height: 100px; margin: 15px 30px; padding: 10px 20px 15px 30px; border: 10px solid #333; border-radius: 5px;
35. Organization of Properties 3. Backgrounds & Colors What images and colors affect my entire element? • Alphabetize background rules background-color: #eee; background-image: url("../images/background.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;
36. Organization of Properties 4. Text What does my element’s text look like? • Alphabetize text rules color: #333; font-family: 'Open Sans', sans-serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.1rem; line-height: 1.5; text-align: center; text-transform: uppercase;
37. Organization of Properties 5. Miscellaneous What other decorations are on my element? • When in doubt, alphabetize box-shadow: 0px 0px 10px 5px #000; cursor: pointer; opacity: 0.5; pointer-events: none; transition: all 0.4s ease;
38. Organization of Properties Putting it all together! .circle-button { position: relative; display: flex; align-items: center; justify-content: center; height: 0; padding: 50% 0; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; transition: all 0.4s ease; } body { overflow-x: hidden; font: 14px/1.5 "Open Sans", sans-serif; font-size: 1.4rem; -webkit-font-smoothing: subpixel-antialiased; } button, input, select, textarea { -webkit-appearance: none; -moz-appearance: none; } input, select, textarea { width: 100%; margin: 0.2rem 0 1rem 0; padding: 0.5rem 1rem; border: solid 1px #aaa; background-color: #fff; transition: all 0.4s ease; }
39. Recap Learn SASS " Use Partials % Order Rules &
40. Further Reading • SASS documentation • sass-lang.com • CSS Tricks – Grouping Rules by Type • https://css-tricks.com/poll-results-how-do-you- order-your-css-properties/ • Idiomatic CSS • https://github.com/necolas/idiomatic-css
41. Thanks! Questions? @caraheacock ' github.com/caraheacock ( caraheacock.com ) caraheacock@gmail.com *