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

Sass Basics #1

jina
April 22, 2014

Sass Basics #1

A beginner-level presentation I gave internally at work to teach the basics of Sass.

jina

April 22, 2014
Tweet

More Decks by jina

Other Decks in Design

Transcript

  1. Sass syntactically awesome style sheets THE ORIGINAL SYNTAX, .sass EXTENSION

    INDENTED, WHITESPACE-SENSITIVE NO CURLY BRACES OR SEMI-COLONS, & PROVIDES MIXIN SHORTCUTS
  2. SCSS sassy CSS THE NEWER SYNTAX, .scss EXTENSION EASIER FOR

    NEWCOMERS TO LEARN IT LOOKS LIKE REGULAR CSS, BUT WITH EXTRA GOODIES
  3. Sass SCSS h1 background: #eee color: #444 h2 font-weight: bold

    color: #222 h1 { background: #eee; color: #444; } h2 { font-weight: bold; color: #222; }
  4. CSS output SCSS /* * A multiline comment * like

    you see in regular CSS */ /* * A multiline comment * like you see in regular CSS */ // And a single line comment.
  5. CSS output SCSS /* * A multiline comment * like

    you see in regular CSS */ // And a single line comment. in production, usually all comments are stripped…
  6. CSS output SCSS /*! Copyright 2014 Jina */ /*! Copyright

    2014 Jina */ // And a single line comment. exclamation mark forces multiline comments to render
  7. CSS output SCSS .nav { background: #eee; } .nav a

    { float: left; } .nav { background: #eee; a { float: left; } }
  8. CSS output SCSS .nav { background: #eee; } .nav a

    { float: left; } .nav a span { color: #ccc; } .nav { background: #eee; a { float: left; span { color: #ccc; } } }
  9. CSS output SCSS .nav { background: #eee; } .nav a

    { float: left; } .nav a :hover { text-decoration: none; } .nav a span { color: #ccc; } .nav { background: #eee; a { float: left; :hover { text-decoration: none; } span { color: #ccc; } } }
  10. .nav { background: #eee; a { float: left; &:hover {

    text-decoration: none; } span { color: #ccc; } } } CSS output SCSS .nav { background: #eee; } .nav a { float: left; } .nav a:hover { text-decoration: none; } .nav a span { color: #ccc; }
  11. .nav { background: #eee; a { float: left; &:hover {

    text-decoration: none; } .ie-6 & { display: inline; } span { color: #ccc; } } } CSS output SCSS .nav { background: #eee; } .nav a { float: left; } .nav a:hover { text-decoration: none; } .ie-6 .nav a { display: inline; } .nav a span { color: #ccc; }
  12. .nav { background: #eee; a { float: left; @media print

    { color: #000; } &:hover { text-decoration: none; } .ie-6 & { display: inline; } span { color: #ccc; } } } CSS output SCSS .nav { background: #eee; } .nav a { float: left; } @media print { .nav a { color: #000; } } .nav a:hover { text-decoration: none; } .ie-6 .nav a { display: inline; } .nav a span { color: #ccc; }
  13. .nav { background: #eee; a { float: left; @media print

    { color: #000; } &:hover { text-decoration: none; } .ie-6 & { display: inline; } span { color: #ccc; } } } Sass syntax SCSS syntax .nav background: #eee a float: left @media print color: #000 &:hover text-decoration: none .ie-6 & display: inline span color: #ccc
  14. .sidebar { border: 1px solid #eee { top-color: #fff; left:

    0; } } CSS output SCSS .sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0; }
  15. body { color: #444; .sidebar { color: #888; h2 {

    color: #666; a { color: #369; } } } } CSS output SCSS body { color: #444; } body .sidebar { color: #888; } body .sidebar h2 { color: #666; } body .sidebar h2 a { color: #369; }
  16. List of values separated by commas or spaces 1.5em 1em

    0 2em Helvetica, Arial, sans-serif
  17. CSS output SCSS body { color: #444; } a {

    color: #369; } button { background: #369; } $text: #444; $link: #369; body { color: $text; } a { color: $link; } button { background: $link; }
  18. CSS output SCSS body { color: #444; } a {

    color: #036; } button { background: #036; } $text: #444; $link: #369; $link: #036; body { color: $text; } a { color: $link; } button { color: $link; }
  19. CSS output SCSS body { color: #222; } a {

    color: #369; } $text: #222; $text: #444 !default; $link: #369 !default; body { color: $text; } a { color: $link; }
  20. CSS output SCSS a { color: #336699; } a:hover {

    color: #2d5986; } $link: #369; a { color: $link; &:hover { color: darken($link, 5%); } }
  21. CSS output SCSS .column { margin: 0 16px; padding: 0

    8px; } $gutter: 16px; .column { margin: 0 $gutter; padding: 0 ($gutter / 2); }
  22. “Be regular and orderly in your life so that you

    may be violent and original in your work.” — GUSTAVE FLAUBERT
  23. USE SASSMEISTER TO EXPERIMENT WITH NESTING & VARIABLES. BUILD A

    COLOR PALETTE USING ONE OR TWO BASE COLORS AND LETTING SASS GENERATE THE OTHER COLORS. NEXT WEEK: MIXINS! your homework