Sass Basics #1

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

Transcript

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

   View Slide

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

   View Slide

3. you want
   me to use
   what???
   

   View Slide

4. 2 weeks later…
   

   View Slide

5. omg! omg!
   yay Sass!
   

   View Slide

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

   View Slide

7. WTF is Sass?
   

   View Slide

8. Sass, not SASS!
   

   View Slide

9. INVENTED 2007 BY
   Hampton
   Catlin
   

   View Slide

10. CORE TEAM
    Nathan
    Weizenbaum
    Chris
    Eppstein
    

    View Slide

11. compilation
    

    View Slide

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

    View Slide

13. common
    misconceptions
    

    View Slide

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

    View Slide

15. CODEKIT.COM
    

    View Slide

16. MHS.GITHUB.IO/SCOUT-APP
    

    View Slide

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

    View Slide

18. LIBSASS.ORG
    

    View Slide

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

    View Slide

20. 2 syntaxes…
    

    View Slide

21. Sass
    syntactically awesome style sheets
    THE ORIGINAL SYNTAX, .sass EXTENSION
    INDENTED, WHITESPACE-SENSITIVE
    NO CURLY BRACES OR SEMI-COLONS, & PROVIDES MIXIN SHORTCUTS
    

    View Slide

22. SCSS
    sassy CSS
    THE NEWER SYNTAX, .scss EXTENSION
    EASIER FOR NEWCOMERS TO LEARN
    IT LOOKS LIKE REGULAR CSS, BUT WITH EXTRA GOODIES
    

    View Slide

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;
    }
    

    View Slide

24. choose your own
    adventure
    

    View Slide

25. easier
    maintainability
    

    View Slide

26. don’t
    repeat
    yourself
    

    View Slide

27. patterns &
    proportions
    

    View Slide

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

    View Slide

29. don’t overwhelm yourself.
    start small
    

    View Slide

30. SASS-LANG.COM
    

    View Slide

31. SASSMEISTER.COM
    

    View Slide

32. We’ll use Sassmeister to try
    out Sass.
    We can save our work to
    GitHub gists.
    

    View Slide

33. commenting
    with Sass
    

    View Slide

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.
    

    View Slide

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…
    

    View Slide

36. CSS output
    SCSS
    /*! Copyright 2014 Jina */
    /*! Copyright 2014 Jina */
    // And a single line comment.
    exclamation mark forces multiline comments to render
    

    View Slide

37. nesting with Sass
    

    View Slide

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

    View Slide

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; }
    }
    }
    

    View Slide

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; }
    }
    }
    

    View Slide

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; }
    

    View Slide

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; }
    

    View Slide

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; }
    

    View Slide

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
    

    View Slide

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;
    }
    

    View Slide

46. be careful
    with nesting
    

    View Slide

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;
    }
    

    View Slide

48. Overly-specific
    CSS is a bitch to
    work with!
    

    View Slide

49. more than 3 levels?
    refactor.
    

    View Slide

50. variables with Sass
    

    View Slide

51. Numbers
    with or without units
    1.2
    13
    10px
    

    View Slide

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

    View Slide

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

    View Slide

54. Booleans
    true or false
    

    View Slide

55. null
    

    View Slide

56. List of values
    separated by commas or spaces
    1.5em 1em 0 2em
    Helvetica, Arial, sans-serif
    

    View Slide

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; }
    

    View Slide

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; }
    

    View Slide

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

    View Slide

60. use !default on
    variables for settings
    that may get
    overridden
    

    View Slide

61. CSS output
    SCSS
    a { color: #336699; }
    a:hover { color: #2d5986; }
    $link: #369;
    a {
    color: $link;
    &:hover {
    color: darken($link, 5%);
    }
    }
    

    View Slide

62. JACKIEBALZER.COM/COLOR
    

    View Slide

63. CSS output
    SCSS
    .column {
    margin: 0 16px;
    padding: 0 8px;
    }
    $gutter: 16px;
    .column {
    margin: 0 $gutter;
    padding: 0 ($gutter / 2);
    }
    

    View Slide

64. clarity > brevity
    

    View Slide

65. stay organized
    

    View Slide

66. “Be regular and orderly in your life
    so that you may be violent and
    original in your work.”
    — GUSTAVE FLAUBERT
    

    View Slide

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
    

    View Slide