Paperless Post Sass

Transcript

1. Paperless Post Sass
2. Converted .sass to .scss
3. Why SCSS? • More like CSS, so lower learning curve • We were creating all new files in .scss anyway
4. Conversion Process: • Convert syntax first commit • Rename files in second commit
5. Updated Writing CSS/ SCSS Style Guide
6. General CSS Rules • Use soft-tabs (i.e. spaces not tabs) with a two space indent. • Put spaces after : in property declarations. • Put spaces before { in rule declarations. • Line returns after the last property declaration to place the }. • Use // for comment blocks (instead of /* */). (Why? // comments are stripped when compiled and minimized, /* */ will show up regardless.) • Use hex color codes #000 unless using rgba. • DO NOT USE IDs
7. SCSS Rules • Any $variable or @mixin that is used in more than one file should be put in globals/. Others should be put at the top of the file where they're used. • List `@extend`s first. • List "regular" styles next in alphabetical order. • List `@include`s next. • Nested Selectors last, in alphabetical order. • Nothing goes after the nested stuff. And the same order as above within the nested selector would apply. • All Vendor Prefixes Use @mixins. • Maximum Nesting: Three Levels Deep. If you find yourself going further, think about reorganizing your rules (either the specificity needed, or the layout of the nesting). • Maximum Nesting: 50 Lines. • Global and Section-Specific Sass Files Are just Table of Contents. • List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
8. SCSS Exaggerated Example .example-scss { // List @extend(s) first @extends %module; // List "regular" styles next in alphabetical order background-color: #000; position: absolute; // List @include(s) next @include transition(all 0.3s ease-out); // Nested Selectors last, in alphabetical order > h3 { border-bottom: 1px solid white; @include transform(rotate(90deg)); span { ... // NO MORE NESTED STYLES! } } .nested-example { ... } }
9. Reset or Normalize?
10. Currently: Homespun Reset
11. By Default, Compass includes Reset.css
12. Reset vs. Normalize • A reset basically makes all browser elements un-styled • You have to then style everything • Preserves useful defaults rather than "unstyling" everything. • Corrects some common bugs that are out of scope for reset.css. • Doesn't clutter your dev tools. (Doesn’t blanket style a bunch of elements) • More modular.
13. compass-normalize
14. Methodologies
15. • OOCSS (Object-Oriented CSS) • SMACCS (Scalable and Modular Architecture for CSS) • BEM (Block-Element-Modifier)
16. OOCSS • Currently used in our code base • Most popular form is for margins & padding
17. SMACSS • A great idea is using JavaScript specific classes prefaced with js- • Also status type classes like is-selected, but it against how jQuery normally classes elements with functions like .hide(); • Categories 1. Base 2. Layout 3. Module 4. State 5. Theme
18. BEM • Block: .menu • Element: .menu__item • Modifier: .menu__current • (BEM) .menu__item__current
19. @extends and @incldues
20. New button!
21. %button { -webkit-font-smoothing: antialiased; -webkit-touch-callout: none; background-clip: padding-box; border: none; border-radius: 0.2em; cursor: pointer; display: inline-block; font-family: 'Adobe Garamond Pro Italic'; font-size: 18px; height: 40px; line-height: 42px; // This is a visual fix for lining up the text vertically margin: 0; padding: 0 36px; position: relative; text-align: center; text-decoration: none !important; @include box-sizing('border-box'); @include user-select('none'); } @mixin button($background-color, $color) { @extend %button; background-color: $background-color; color: $color !important; &:active, &:hover { background-color: lighten($background-color, 15%); } } .button--basic { @include button(#111, #fff); }
22. Lets’ Talk About File Structure
23. Clean out your Sass Junk Drawer!
24. |- sass/ |--- buttons/ |--- color/ |--- forms/ |--- layouts/ |--- modules/ |--- typography/ |--- ui_patterns/ |--- _buttons.scss |--- _config.scss |--- _forms.scss |--- _global_design.scss |--- _reset.scss |--- _typography.scss |— style.scss
25. • Keep element partials clean! .button--basic { @include button(#111, #fff); }
26. Sample Directory Structure |- styles/ |--- modules/ |----- registration/ |------- _extends.scss |------- _functions.scss |------- _mixin.scss |------- _module_registration.scss |------- _module_personalInfo.scss |----- purchase/ |------- _extends.scss |------- _functions.scss |------- _mixin.scss |------- _module_summary.scss |------- _module_purchase.scss