Sass for designers

Sass for designers

From a talk at CSS Summit in July 2013

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

July 25, 2013
Tweet

Transcript

  1. Slide Sass for designers @laurakalbag Sass for designers 1

  2. Slide Sass for designers @laurakalbag 2 HTML and CSS loads

    JavaScript a tiny bit Programming argh! scary! Illustration fairly often Print design every now and again Web design loads What I do
  3. Slide Sass for designers @laurakalbag 3 Documentation for LESS and

    Sass LESS Sass
  4. Slide Sass for designers @laurakalbag 4 the command line intimidates

    me
  5. Slide Sass for designers @laurakalbag 5 this talk will show

    you some of the basic features of Sass
  6. Slide Sass for designers @laurakalbag Setting up a project using

    Sass 6
  7. Slide Sass for designers @laurakalbag You can re-trace my steps

    later on GitHub 7 https://github.com/laurakalbag/webtalkdogwalk
  8. Slide Sass for designers @laurakalbag 8 Use CodeKit for Sass

    : http://incident57.com/codekit/
  9. Slide Sass for designers @laurakalbag 9 http://alphapixels.com/prepros/ http://mixture.io/ CodeKit alternatives

    for Windows
  10. Slide Sass for designers @laurakalbag 10 Download CodeKit at http://incident57.com/codekit/

  11. Slide Sass for designers @laurakalbag 11 Unzip the CodeKit folder

    and drag it into Applications
  12. Slide Sass for designers @laurakalbag 12 Open up CodeKit

  13. Slide Sass for designers @laurakalbag 13 web talk dog walk

    my web talk dog walk idea
  14. Slide Sass for designers @laurakalbag 14 Mockups in Sketch (http://www.bohemiancoding.com/sketch/)

  15. Slide Sass for designers @laurakalbag 15 Sublime Text 2 (http://www.sublimetext.com/2)

    my (current) preferred text editor
  16. Slide Sass for designers @laurakalbag 16 HTML/PHP in Sublime Text

    2 HTML all set up and ready to style
  17. Slide Sass for designers @laurakalbag 17 HTML as seen in

    Google Chrome
  18. Slide Sass for designers @laurakalbag 18 File > Add Project…

    choose the project folder add the project to CodeKit
  19. Slide Sass for designers @laurakalbag 19 the project as seen

    in CodeKit
  20. Slide Sass for designers @laurakalbag 20 Hold shift to select

    multiple files and then click ‘Hide These Files’ hide the files we don’t want to compile or compress
  21. Slide Sass for designers @laurakalbag 21 when the files are

    hidden, you don’t see them (!)
  22. Slide Sass for designers @laurakalbag 22 Create an empty folder

    called ‘sass’ in the site’s root folder set up a folder for the Sass files
  23. Slide Sass for designers @laurakalbag 23 Create an empty file

    in the ‘sass’ folder and call it ‘style.scss’ our first Sass file (.scss)
  24. Slide Sass for designers @laurakalbag 24 Use the Package Manager

    to install Syntax Highlighting for Sass add syntax highlighting so Sass is easy to read
  25. Slide Sass for designers @laurakalbag The difference between .sass and

    .scss 25
  26. Slide Sass for designers @laurakalbag .sass and .scss are both

    Sass syntaxes 26
  27. Slide Sass for designers @laurakalbag 27 .scss .sass no semi-colons

    ; and no curly brackets {} semi-colons ; and curly brackets {} the differences between .scss and .sass
  28. Slide Sass for designers @laurakalbag .scss allows ordinary CSS to

    be used in the same files 28 and this is why I use it
  29. Slide Sass for designers @laurakalbag First steps in Sass 29

  30. Slide Sass for designers @laurakalbag 30 my CSS reset in

    the style.scss file
  31. Slide Sass for designers @laurakalbag 31 Hit the refresh icon

    on the bottom left to see the style.scss file our first .scss file in CodeKit
  32. Slide Sass for designers @laurakalbag 32 compile the Sass file

    using CodeKit select the style.scss file and click ‘Compile’
  33. Slide Sass for designers @laurakalbag 33 the CSS folder CodeKit

    has created you can see where CodeKit created the folder and file
  34. Slide Sass for designers @laurakalbag 34 style.css, as generated by

    CodeKit from the style.scss file the CSS CodeKit has created
  35. Slide Sass for designers @laurakalbag 35 Select ‘Compressed’ from the

    Output Style: dropdown compress the outputted CSS to make it nice and quick
  36. Slide Sass for designers @laurakalbag 36 Select ‘Compressed’ from the

    Output Style: dropdown when CodeKit compiles, it has a progress bar and notification
  37. Slide Sass for designers @laurakalbag 37 style.css, created, compiled and

    compressed by CodeKit
  38. Slide Sass for designers @laurakalbag 38 Link to the compiled

    and compressed CSS file
  39. Slide Sass for designers @laurakalbag 39 the CSS reset in

    action
  40. Slide Sass for designers @laurakalbag Partials 40

  41. Slide Sass for designers @laurakalbag 41 a messy file

  42. Slide Sass for designers @laurakalbag 42 Jonathan Snook’s SMACSS http://smacss.com/book/categorizing

    a sensible way to split up files
  43. Slide Sass for designers @laurakalbag 43 @import “reset”; Sass partial

    syntax include this in the compiled version of this file the file name
  44. Slide Sass for designers @laurakalbag 44 Use @import to tell

    CodeKit to compile all these files into style.css
  45. Slide Sass for designers @laurakalbag 45 see how CodeKit doesn’t

    compile partials directly Save the files so CodeKit compiles them
  46. Slide Sass for designers @laurakalbag 46 See that CodeKit hasn’t

    created any more files
  47. Slide Sass for designers @laurakalbag Variables 47

  48. Slide Sass for designers @laurakalbag 48 mockup colour palette

  49. Slide Sass for designers @laurakalbag 49 $grey-light: #f9f9f9; Sass variable

    syntax name of the variable the variable unit
  50. Slide Sass for designers @laurakalbag 50

  51. Slide Sass for designers @laurakalbag Comments 51

  52. Slide Sass for designers @laurakalbag 52 /* this comment will

    show in the CSS */ // this comment will only show in the Sass Sass comment syntax
  53. Slide Sass for designers @laurakalbag 53 Add a Sass-only comment

    to the top of the file
  54. Slide Sass for designers @laurakalbag 54 colour variables on my

    base elements
  55. Slide Sass for designers @laurakalbag 55 the CodeKit Log and

    error Syntax error: undefined variable: "$grey-dark";
  56. Slide Sass for designers @laurakalbag 56 the variables partial wasn’t

    being imported, this caused the error
  57. Slide Sass for designers @laurakalbag 57 the site is starting

    to look more like the mockup
  58. Slide Sass for designers @laurakalbag Vertical rhythm with variables 58

  59. Slide Sass for designers @laurakalbag 59 I’ve added web fonts

    to the site but it lacks visual hierarchy
  60. Slide Sass for designers @laurakalbag 60 the base grid I’ve

    used on my mockup
  61. Slide Sass for designers @laurakalbag 61 a variable based on

    my mockup grid base unit
  62. Slide Sass for designers @laurakalbag 62 the body text font

    size in the mockup is 15px
  63. Slide Sass for designers @laurakalbag 63 Sass variable operations syntax

    font-size: $unit*1.5; property a number name of the variable multiply by
  64. Slide Sass for designers @laurakalbag 64 Make the body text

    the size of the base unit multiplied by 1.5
  65. Slide Sass for designers @laurakalbag 65 Save the file and

    see how Sass compiles the variable into 15px
  66. Slide Sass for designers @laurakalbag 66 Use the base unit

    on all elements to achieve basic vertical rhythm
  67. Slide Sass for designers @laurakalbag 67 Now the hierarchy is

    clearer, but the font size is too small
  68. Slide Sass for designers @laurakalbag 68 Change the variable unit

    to affect all instances of $unit bump up the unit size by 1px
  69. Slide Sass for designers @laurakalbag 69 Now the text is

    more readable
  70. Slide Sass for designers @laurakalbag 70 I’ve added more colour,

    illustrations and padding to the site
  71. Slide Sass for designers @laurakalbag Mixins 71

  72. Slide Sass for designers @laurakalbag 72 the web talk dog

    walk title appears twice on the page
  73. Slide Sass for designers @laurakalbag 73 In a headers.scss partial,

    write the rules to hide the first title
  74. Slide Sass for designers @laurakalbag 74 add a new partial

    called mixins.scss
  75. Slide Sass for designers @laurakalbag 75 Sass mixin syntax for

    defining a mixin @mixin hide { height: 0; margin: 0; overflow: hidden; padding: 0; } create a mixin mixin rules mixin name
  76. Slide Sass for designers @laurakalbag 76 Create a mixin called

    “hide”
  77. Slide Sass for designers @laurakalbag 77 Sass mixin syntax for

    including a mixin .site-title { @include hide; } include a mixin selector mixin name
  78. Slide Sass for designers @laurakalbag 78 Include the “hide” mixin

    rules for the site title
  79. Slide Sass for designers @laurakalbag 79 Now the site title

    is hidden and I can reuse that rule elsewhere
  80. Slide Sass for designers @laurakalbag Nesting 80

  81. Slide Sass for designers @laurakalbag 81 The navigation buttons have

    the class .site-navigation
  82. Slide Sass for designers @laurakalbag 82 In CSS, I would

    lay out the rules for the navigation by specificity
  83. Slide Sass for designers @laurakalbag 83 Sometimes I’d indent the

    CSS to make it easier to read
  84. Slide Sass for designers @laurakalbag 84 Nest the rules inside

    the parent to make it easy to read
  85. Slide Sass for designers @laurakalbag 85 It just works in

    the same way as ordinary CSS
  86. Slide Sass for designers @laurakalbag 86 I want to make

    the selected navigation item stand out use & to use a classname selector while nesting
  87. Slide Sass for designers @laurakalbag 87 Now the .selected class

    is styled differently
  88. Slide Sass for designers @laurakalbag 88 Use & to include

    pseudo selectors
  89. Slide Sass for designers @laurakalbag 89 Now the :hover works

  90. Slide Sass for designers @laurakalbag Nesting media queries 90

  91. Slide Sass for designers @laurakalbag 91 some kind of vertical

    rhythm no kind of vertical rhythm I need to fix the text in the header. It doesn’t line up.
  92. Slide Sass for designers @laurakalbag 92 How I’d use media

    queries in ordinary CSS
  93. Slide Sass for designers @laurakalbag 93 With Sass, we can

    nest the media query inside the selector
  94. Slide Sass for designers @laurakalbag 94 We can use the

    unit variable in the media queries our breakpoints are now relative to our base unit
  95. More mixins Slide Sass for designers @laurakalbag 95

  96. Slide Sass for designers @laurakalbag 96 The line length is

    too long, the layout feels stretched out
  97. Slide Sass for designers @laurakalbag 97 Use max-width and margin:

    auto to centre multiple elements
  98. Slide Sass for designers @laurakalbag 98 The repetition makes this

    suitable for making into another mixin
  99. Slide Sass for designers @laurakalbag 99 Use this centre-layout mixin

    to make my stylesheet cleaner
  100. Slide Sass for designers @laurakalbag 100 The layout now looks

    more like the mockup
  101. Slide Sass for designers @laurakalbag 101 Floating responsive containers with

    borders is tricky
  102. Slide Sass for designers @laurakalbag 102 Solve the problem with

    borders using box-sizing: border-box;
  103. Slide Sass for designers @laurakalbag 103 box-sizing: border-box; needs backup

    with prefixes moz and webkit need prefixes to make border-box work
  104. Slide Sass for designers @laurakalbag 104 Another repetitive chunk of

    code that makes a great mixin
  105. Slide Sass for designers @laurakalbag 105 Now the boxes have

    borders and float nicely
  106. Parent selectors Slide Sass for designers @laurakalbag 106

  107. Slide Sass for designers @laurakalbag 107 PNGs don’t work so

    well on zoom or hi-DPI displays
  108. Slide Sass for designers @laurakalbag 108 .png .svg Use SVGs

    with a clever script to detect SVG support the .svg version of the file looks crisp at any size
  109. Slide Sass for designers @laurakalbag 109 Use the .svg class

    to show an SVG version of the image the script adds ‘svg’ as a body class when SVG is supported
  110. Slide Sass for designers @laurakalbag 110 This is how I

    would use the .svg class without a parent selector
  111. Slide Sass for designers @laurakalbag 111 Sass syntax for parent

    selectors .svg & { background: url(‘../images/bone.svg’) 0 0 no-repeat; } properties parent selector
  112. Slide Sass for designers @laurakalbag 112 Use the parent selector

    to include the SVG background
  113. Slide Sass for designers @laurakalbag 113 Now the bullet points

    look crisp
  114. Slide Sass for designers @laurakalbag Colour operations 114

  115. Slide Sass for designers @laurakalbag 115 I want the H2

    titles to be a brighter green
  116. Slide Sass for designers @laurakalbag 116 our base file where

    I specify the H2 colour
  117. Slide Sass for designers @laurakalbag 117 Sass syntax for saturating

    colour color: saturate($green-dark, 100%); colour operation property variable name amount of saturation
  118. Slide Sass for designers @laurakalbag 118 At 100% saturation, the

    green looks much brighter previous saturation level 100% saturation
  119. Slide Sass for designers @laurakalbag 119 the final site: http://webtalkdogwalk.in/brighton

  120. Slide Sass for designers @laurakalbag 120 Thank you! Catch me

    on app.net or Twitter, I’m @laurakalbag :)