Intro to Sass

Transcript

1. Sass
   Syntactically Awesome Style Sheets
   Devstaff Heraklion • October 2016
   Zaharenia Atzitzikaki • @sugarenia
   

   View Slide

2. Sass
   Syntactically Awesome Style Sheets
   Devstaff Heraklion • October 2016
   Zaharenia Atzitzikaki • @sugarenia
   

   View Slide

3. I’m Zaharenia.
   Lead designer @ Workable
   

   View Slide

4. Sass? Why?
   

   View Slide

5. CSS is repetitive
   

   View Slide

6. CSS
   .module {
   ...
   }
   .module .title {
   ...
   }
   .module .title span {
   ...
   }
   .module .footer {
   ...
   }
   

   View Slide

7. CSS is very repetitive
   

   View Slide

8. CSS was not made for this
   

   View Slide

9. View Slide

10. Variables
    

    View Slide

11. Variables
    Functions
    

    View Slide

12. Variables
    Functions
    Modules
    

    View Slide

13. What is Sass?
    

    View Slide

14. View Slide

15. Sass
    // SCSS syntax
    $color: #f00;
    .link {
    color: $color;
    text-decoration: underline;
    &:hover {
    text-decoration: none;
    }
    }
    // Sass syntax
    $color: #f00
    .link
    color: $color
    text-decoration: underline
    &:hover
    text-decoration: none
    

    View Slide

16. You can start now.
    

    View Slide

17. How to install
    

    View Slide

18. $> gem install sass
    

    View Slide

19. $> sass --watch scss:css
    

    View Slide

20. style.scss > style.css
    

    View Slide

21. View Slide

22. View Slide

23. Don’t edit the .css file!
    PITFALL
    

    View Slide

24. Using Sass
    

    View Slide

25. Nesting
    

    View Slide

26. Sass
    .modal {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    }
    .modal-footer {
    padding: 14px 15px 15px;
    text-align: center;
    }
    }
    

    View Slide

27. CSS
    .modal {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    }
    .modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    }
    .modal .modal-footer {
    padding: 14px 15px 15px;
    text-align: center;
    }
    

    View Slide

28. Don’t mimic DOM!
    PITFALL
    

    View Slide

29. Sass
    body {
    .container {
    .content {
    .articles {
    & > .post {
    .title {
    h1 {
    a {
    }
    }
    }
    .content {
    p { ... }
    ul {
    li { ... }
    }
    

    View Slide

30. Sass
    }
    h4 {
    a { ... }
    }
    p {
    a { ... }
    }
    ul {
    li { ... }
    }
    }
    }
    }
    }
    }
    }
    

    View Slide

31. View Slide

32. Parent reference
    

    View Slide

33. Sass
    .box {
    .box-section a {
    color: fuchsia;
    text-decoration: none;
    &:hover {
    text-decoration: underline;
    }
    &.disabled {
    color: grey;
    }
    }
    }
    

    View Slide

34. CSS
    .box .box-section a {
    color: fuchsia;
    text-decoration: none;
    }
    .box .box-section a:hover {
    text-decoration: underline;
    }
    .box .box-section a.disabled {
    color: grey;
    }
    

    View Slide

35. .box {
    …
    &-header {
    …
    }
    }
    

    View Slide

36. .box {
    …
    &-header {
    …
    }
    }
    .box {
    …
    }
    .box-header {
    …
    }
    

    View Slide

37. .box {
    …
    .checkout & {
    …
    }
    }
    

    View Slide

38. .box {
    …
    .checkout & {
    …
    }
    }
    .box {
    …
    }
    .checkout .box {
    …
    }
    

    View Slide

39. .box {
    …
    & + & {
    …
    }
    }
    

    View Slide

40. .box {
    …
    & + & {
    …
    }
    }
    .box {
    …
    }
    .box + .box {
    …
    }
    

    View Slide

41. Variables
    

    View Slide

42. Sass
    $color: #f00;
    $border: 1px solid $color;
    .link {
    color: $color;
    border-bottom: $border;
    }
    

    View Slide

43. Sass
    // Colors
    $color-link: #01579b;
    $color-text: #607d8b;
    $color-danger: #d32f2f;
    $color-success: #43a047;
    $color-alert: #ffca28;
    

    View Slide

44. Mixins
    

    View Slide

45. Sass
    @mixin box {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    }
    .box {
    @include box;
    }
    

    View Slide

46. Sass
    @mixin box($width, $height: $width) {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: $width;
    height: $height;
    }
    .box {
    @include box(100px, 300px);
    }
    

    View Slide

47. Don’t worry about bloat
    

    View Slide

48. Don’t use mixins
    for vendor prefixes
    PITFALL
    

    View Slide

49. Extends
    

    View Slide

50. This is a generic alert!
    This is a positive alert!
    

    View Slide

51. Sass
    .alert {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: $color-accent;
    @include shadow(0, 1px, 2px, rgba(0,0,0,.5));
    @include rounded(10px);
    }
    .alert-positive {
    background: #9c3;
    }
    ...
    

    View Slide

52. Sass
    .alert {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: $color-accent;
    @include shadow(0, 1px, 2px, rgba(0,0,0,.5));
    @include rounded(10px);
    }
    .alert-positive {
    @extend .alert;
    background: #9c3;
    }
    ...
    

    View Slide

53. CSS
    .alert,
    .alert-positive {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: yellow;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    }
    .alert-positive {
    background: #9c3;
    }
    

    View Slide

54. Multiple extends will bite you
    PITFALL
    

    View Slide

55. Sass
    .top-navigation,
    .subnav,
    .sidenav,
    #header,
    .main-footer,
    .inbox__actions,
    .feed__item__selector input[type="checkbox"],
    .feed__item__main .avatar,
    .feed__item__main .control-faux,
    .feed__item__actions,
    .feed__item__title .js-visibility,
    .feed__item__preview__text,
    .scroll-shelf,
    .profile__toolbar,
    .profile__footer,
    .profile__section__header .download,
    .overlay__shelf,
    

    View Slide

56. Sass
    .timeline__item--import,
    .hashtag-add__field,
    .hashtag-add__toggle,
    .hashtag__remove,
    .ticker.hide,
    .followers,
    .dropdown-menu,
    .alert .btn-compact {
    ...
    }
    

    View Slide

57. Extending placeholders
    

    View Slide

58. Sass
    %alert {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: $color-accent;
    @include shadow(0, 1px, 2px, rgba(0,0,0,.5));
    @include rounded(10px);
    }
    .alert-positive { @extend %alert; background: #9c3; }
    .alert-negative { @extend %alert; background: #c00; }
    

    View Slide

59. Sass
    .alert-positive,
    .alert-negative {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: $color-accent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    }
    .alert-positive { background: #9c3; }
    .alert-negative { background: #c00; }
    

    View Slide

60. Mixin or extend?
    

    View Slide

61. Sass
    %alert {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    @include shadow(0, 1px, 2px, rgba(0,0,0,.5));
    @include rounded(10px);
    }
    .alert-positive { @extend %alert; background: #9c3; }
    .alert-negative { @extend %alert; background: #c00; }
    

    View Slide

62. CSS
    .alert-positive,
    .alert-negative {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    }
    .alert-positive { background: #9c3; }
    .alert-negative { background: #c00; }
    

    View Slide

63. Sass
    @mixin alert($background: "yellow") {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: $background;
    @include shadow(0, 1px, 2px, rgba(0,0,0,.5));
    @include rounded(10px);
    }
    .alert-positive { @include alert(#9c3); }
    .alert-negative { @include alert(#c00); }
    

    View Slide

64. CSS
    .alert-positive {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: #9c3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    }
    .alert-negative {
    padding: 15px;
    font-size: 1.2em;
    line-height: 1;
    color: #fff;
    background: #c00;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    }
    

    View Slide

65. @extend for related modules
    @mixin when you need arguments
    RULE OF THUMB
    

    View Slide

66. @import
    

    View Slide

67. @import "variables";
    @import "mixins";
    @import "layout";
    style.scss
    

    View Slide

68. _variables.scss _layout.scss
    _mixins.scss
    style.css
    

    View Slide

69. PITFALL
    The 4096 selector limit in IE
    

    View Slide

70. View Slide

71. Functions
    

    View Slide

72. Custom functions
    

    View Slide

73. Sass
    $grid-columns: 12;
    $grid-width: 960px;
    @function columns($cols) {
    @return (($grid-width / $grid-columns) * $cols) + “px”;
    }
    main {
    width: columns(9); // 720px
    }
    aside {
    width: columns(3); // 240px
    }
    

    View Slide

74. Sass
    @function black($opacity) {
    @return rgba(0, 0, 0, $opacity);
    }
    @function white($opacity) {
    @return rgba(255, 255, 255, $opacity);
    }
    .faded-text {
    color: black(0.5);
    }
    .faded-panel {
    background-color: white(0.3);
    }
    

    View Slide

75. Helper functions
    

    View Slide

76. Sass
    .button {
    background-image: linear-gradient(
    to bottom,
    lighten(#c00, 5%),
    darken(#c00, 5%)
    );
    }
    darken/lighten
    

    View Slide

77. View Slide

78. Sass
    @mixin gradient-vertical($start-color: #555, $end-color: #333) {
    background-color: mix($start-color, $end-color, 60%);
    background-image: linear-gradient(to bottom, $start-color, $end-color);
    background-repeat: repeat-x;
    }
    .box {
    @include gradient-vertical(#f8af1e, #097380);
    }
    mix
    

    View Slide

79. With gradient support Without gradient support
    

    View Slide

80. Comments
    

    View Slide

81. Sass
    $variable: "hi!";
    /* This is a comment which can span
    * several lines.
    * It can also make use of variables! #{$variable} */
    .box {
    ...
    }
    // This is a single-line comment
    // It won't appear in the CSS output
    

    a {
    ...
    }
    

    View Slide

82. Sass tools
    

    View Slide

83. Sassmeister
    

    View Slide

84. sassmeister.com
    

    View Slide

85. Linting
    

    View Slide

86. View Slide

87. View Slide

88. Libraries & frameworks
    

    View Slide

89. compass-style.org
    

    View Slide

90. bourbon.io
    

    View Slide

91. neat.bourbon.io
    

    View Slide

92. bitters.bourbon.io
    

    View Slide

93. refills.bourbon.io
    

    View Slide

94. BONUS!
    Workable Style Guide
    https://github.com/Workable/css-style-guide
    

    View Slide

95. Devstaff Heraklion • October 2016
    Zaharenia Atzitzikaki • @sugarenia
    Thanks!
    You rock.
    

    View Slide