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