Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Maintainable stylesheets with Sass

Florian Plank
August 17, 2012
300

Maintainable stylesheets with Sass

You’re writing beautiful, well tested and refactored code. You do your best to keep your views clean. But your stylesheets are a wasteland you would rather not enter and no dedicated designer around. — Sound familiar? Writing, maintaining and refactoring (yes!) clean and readable stylesheets even in large projects is possible and this talk will give a few ideas on how to keep the work on the GUI fun.

Florian Plank

August 17, 2012
Tweet

Transcript

  1. =respond-to($media) @if $media == desktop @media screen and (min-width: 1280px)

    @content @else if $media == large-screen @media screen and (min-width: 1400px) @content
  2. /* This comment is * several lines long. * since

    it uses the CSS comment syntax, * it will appear in the CSS output. */ body color: black // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a color: green
  3. /* This comment is * several lines long. * since

    it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: green; }
  4. “I’d describe semantics as it relates to HTML as tags,

    classes, IDs, and attributes describing but not specifying the content they enclose.” —Chris Coyier
  5. specificity = a, b, c, d a = inline styles

    b = ID c = classes/attributes/pseudo–classes d = elements and pseudo–elements