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

Sass Basics #1

67bb0a8cd6c1993dba0bfe302852f729?s=47 jina
April 22, 2014

Sass Basics #1

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

67bb0a8cd6c1993dba0bfe302852f729?s=128

jina

April 22, 2014
Tweet

Transcript

  1. JINA BOLTON SENIOR PRODUCT DESIGNER SALESFORCE UX Sass Basics #1

  2. Don’t know CSS? …start there. …then come back to this

    :)
  3. you want me to use what???

  4. 2 weeks later…

  5. omg! omg! yay Sass!

  6. Create a GitHub account if you don’t have one already.

    It’s free.
  7. WTF is Sass?

  8. Sass, not SASS!

  9. INVENTED 2007 BY Hampton Catlin

  10. CORE TEAM Nathan Weizenbaum Chris Eppstein

  11. compilation

  12. _icons.scss _grid.scss style.css _type.scss

  13. common misconceptions

  14. “I don’t know how to use the command line.” YOU

    DON’T HAVE TO.
  15. CODEKIT.COM

  16. MHS.GITHUB.IO/SCOUT-APP

  17. “I don’t want to learn Ruby.” YOU DON’T HAVE TO.

  18. LIBSASS.ORG

  19. “I’ll have to learn a whole new syntax.” NOT NECESSARILY.

  20. 2 syntaxes…

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

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

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

    color: #222 h1 { background: #eee; color: #444; } h2 { font-weight: bold; color: #222; }
  24. choose your own adventure

  25. easier maintainability

  26. don’t repeat yourself

  27. patterns & proportions

  28. write less. do more. no, not LESS. ;-)

  29. don’t overwhelm yourself. start small

  30. SASS-LANG.COM

  31. SASSMEISTER.COM

  32. We’ll use Sassmeister to try out Sass. We can save

    our work to GitHub gists.
  33. commenting with Sass

  34. 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.
  35. CSS output SCSS /* * A multiline comment * like

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

    2014 Jina */ // And a single line comment. exclamation mark forces multiline comments to render
  37. nesting with Sass

  38. CSS output SCSS .nav { background: #eee; } .nav a

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

    { float: left; } .nav a span { color: #ccc; } .nav { background: #eee; a { float: left; span { color: #ccc; } } }
  40. 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; } } }
  41. .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; }
  42. .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; }
  43. .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; }
  44. .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
  45. .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; }
  46. be careful with nesting

  47. 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; }
  48. Overly-specific CSS is a bitch to work with!

  49. more than 3 levels? refactor.

  50. variables with Sass

  51. Numbers with or without units 1.2 13 10px

  52. Strings of text with or without quotes "FOO" 'bar' baz

  53. Colors named or encoded blue #04a3f9 rgba(255, 0, 0, 0.5)

  54. Booleans true or false

  55. null

  56. List of values separated by commas or spaces 1.5em 1em

    0 2em Helvetica, Arial, sans-serif
  57. 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; }
  58. 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; }
  59. CSS output SCSS body { color: #222; } a {

    color: #369; } $text: #222; $text: #444 !default; $link: #369 !default; body { color: $text; } a { color: $link; }
  60. use !default on variables for settings that may get overridden

  61. CSS output SCSS a { color: #336699; } a:hover {

    color: #2d5986; } $link: #369; a { color: $link; &:hover { color: darken($link, 5%); } }
  62. JACKIEBALZER.COM/COLOR

  63. CSS output SCSS .column { margin: 0 16px; padding: 0

    8px; } $gutter: 16px; .column { margin: 0 $gutter; padding: 0 ($gutter / 2); }
  64. clarity > brevity

  65. stay organized

  66. “Be regular and orderly in your life so that you

    may be violent and original in your work.” — GUSTAVE FLAUBERT
  67. 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