Paperless Post Sass

Paperless Post Sass

297d4a4b165eb79b7e341645a05c70d6?s=128

Rachel Ober

January 03, 2014
Tweet

Transcript

  1. 3.

    Why SCSS? • More like CSS, so lower learning curve

    • We were creating all new files in .scss anyway
  2. 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
  3. 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
  4. 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 { ... } }
  5. 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.
  6. 16.

    OOCSS • Currently used in our code base • Most

    popular form is for margins & padding
  7. 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
  8. 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); }
  9. 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
  10. 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