mattbieber
6/17/2013 - 3:33 PM

sass notes

sass notes

Overview

{ outline structure of document }

Objective

{ goals for method }

*reduce design time complexity (single huge file) *deliver a single minimized "compiled" version of css

Layout, Block, & Elements should follow a self-describing naming convention.

######maintainability Sass encourages a file structure-based organization that can produce huge benefits in maintainabiliy. With proper structuring, an edit to an elements' style can be performed super quick in comparison to with unstructured, spaghetti CSS. Find-and-replace does not make a confident editing technique. If I can open a semantically-named file with 40 lines of code in it I'm going to be in & out much faster than opening "site.css" and sifting through 4000 lines of code. On the flip side, just as with other OOD principles, one must avoid refactoring to the point of hiderence, so it makes sense to try to achieve a balance.

######encapsulation The OOP concept of encapsulation can be used to tame and further organize a sass project and promoats maintenence & reuse by thinking of a item as being somewhat "stateful". I try to scope things only out to the highest level of use & no higher. For example, a module's variables such as color, or default width are placed at the top of that module's file. These may be redefinitions - $mycolor: $site-palette-blue - but having it defined explcitly scoped encapsulates the items presentation to that file. The same goes for %mixins, @extentions and functions. If they are used only at the module level, that's where they reside.

###Sections

###Folder structure

Folder structure is loosly based on Jakob Hilden's suggested structure for use in S.M.U.R.F which he explains in his SMACSS and SASS - The future of stylesheets article.

Everything at 1st level in breakout folder (prefixed with double underscores __ ) are non-outputting files (they do not directly generate css). Everything in Imports folder is css output

sass/
  ├── main.scss
  ├── _config.scss
  ├── _important.scss
  ├── base/
  │   ├── __extensions.scss
  │   ├── __base.scss
  │   ├── imports/
  │   │   └── _normalize.scss
  ├── color/
  │   ├── __extensions.scss
      └── __color-defaults.scss
  │   ├── imports/
  │   │   ├──
  │   │   └──
  ├── layout/
  │   ├── __extensions.scss
  │   ├── __layouts.scss
  │   ├── imports/
  │   │   ├── _footer.scss
  │   │   ├── _header.scss
  │   │   └── _viewport.scss
  ├── modules/
  │   ├── __extensions.scss
  │   ├── __modules.scss
  │   └── imports/
  │       ├── _content-banner.scss
  │       ├── _content-footer.scss
  │       ├── _content-header.scss
  │       ├── _form-base.scss
  │       ├── _form-findhome.scss
  │       ├── _form-findhome-mini.scss
  │       ├── _form-section.scss
  │       ├── _popover-base.scss
  │       ├── _popover-compare.scss
  │       ├── _popover-refer.scss
  │       └── _widget-slider.scss
  └── typography/
       ├── __extensions.scss
       ├── __typography.scss
       ├── __fonts.scss
       └── imports/
          ├── _headering.scss
          └── _href.scss

###Modules

Location: /sass/modules/imports Naming: _{ purpose }-{ content }.scss

Modules are packaged into indiviual files under /sass/modules/imports with a naming convention similar to _{ purpose }-{ content }.scss . This file should contain any module level variables defined at the top, followed by the class for the module itself. Module class names follow a naming convention of m-{ content } which is typically the same content name used in the filename.

Modules should be independent of layout in a way that allows for arbtrary placement on the page, or within another module. At the same time, a module is responsible for it's own layout of sub-modules & elements.

###BEM

{
  block: 'page',
  content: {
    block: 'head',
    content: [
      { block: 'menu', content: … },
      {
        elem: 'column',
        content: { block: 'logo' }
      },
      {
        elem: 'column',
        content: [
          {
            block: 'search',
            content: [
              { elem: 'input' },
              { elem: 'button', content: 'Search' }
            ]
          }
        ]
      },
      {
        elem: 'column',
        content: {
          block: 'auth', content: …
        }
      }
    ]
  }
}

###Workflow

Work from the most basic perspective out. So start with colors, typography, shadows, icon fonts,borders and other descriptive or attribute type styles. These are the things that element & modules will use to describe themselves. Once this base is in place elements can be created, modules can be constructed from those elements, and finally assembled into a layout:

chrome -> elements -> modules -> layout

###Credits/Inspiration

+Jakob Hilden Taking Sass to the Next Level with SMURF and @extend

+Dale Sande Clean out your Sass junk-drawer +Toadstool (Dale Sande)