Sass Me Up, Scotty

This tutorial was delivered at Pycon Canada on August 11th, 2013.

Transcript

2. Ricardo Vazquez @iamrvazquez
3. The most beautiful photography in the world. The most beautiful photography in the world.
4. design
5. design matters
6. design matters LOT a
7. TheGreat discontent
8. Design must be useful, aesthetic, discrete, lasting, useful. Most importantly, good design must be as little as possible.
9. WeARE DESIGNERS
10. WhO Code...
11. style.css
12. global.css
13. S e p a r a t e your CSS, or I’m coming after you.
14. bits.css typography.css layout.css footer.css ui.css modules.css global.css
15. @import ‘bits.css’ @import ‘ui.css’ @import ‘typography.css’
16. Wishful Thinking
17. Sass Me up
18. OMG WTH IS SASS?
20. No.
21. Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
22. A computer program that modifies data to conform with the input requirements of another program.
23. SASS
24. SASS CSS
25. CSS MAGIC SASS
26. THe OTHERS
30. I used to Drink the hard stuff
31. CSS can be Beautiful
32. Let’s get Started
33. Mod. ARCH. Variables Nesting Extend Mixins Functions IF ELSE each Compass UI/UX Smiles
34. GIFs
36. Variables
37. $siteBg = #B9C1C7 $labelBg = #02ADEA $moduleClr = #AEAFB0
38. span display: inline-block background: $labelBg margin: 5px 5px 0 0
39. NESTING
40. .photo-details.active h4 .select { width: 236px; }
41. .photo-details display: none &.active display: block h4 color: $blue font-size: 14px font-family: $helvetica font-weight: bold text-transform: uppercase .select width: 236px
43. Don’t. Repeat. YOURSELF.
44. BE A Designer
45. v EXtending
46. v Abstract Classes or Placeholders %
47. %sidebar-box margin: 0 0 10px 0 background: $bg padding: 10px .sidebar-auth-box @extend %sidebar-box input[type=text] padding: 10px border: 1px solid #ccc
48. http://bit.ly/sass-extend
49. Simple, right?
50. MIXxxINS
51. Mixins output code instead of returning a result
52. @mixin underline-on-hover() text-decoration: none &:hover text-decoration: underline
53. =underline-on-hover( ) text-decoration: none &:hover text-decoration: underline
54. a:link color: $active background: $buttonBg padding: 5px 10px +underline-on-hover
55. String Interpolation in CSS?
56. HELL YES
57. =vendorize($property, $value) -webkit-#{$property}: $value -moz-#{$property}: $value -ms-#{$property}: $value -o-#{$property}: $value #{$property}: $value
58. +vendorize(appearance, none)
59. +vendorize(appearance, none) +vendorize(box-sizing, border-box)
60. v =group( ) &:before, &:after content: "\0020" display: block height: 0 overflow: hidden &:after clear: both
61. v Know what? We could have done that a better way.
62. v %clearfix:before, &:after content: "\0020" display: block height: 0 overflow: hidden &:after clear: both
63. v Boom
64. v CONTROL Directives
65. v FunctionS
66. v A function is very similar to a mixin, however the output from a function is a single value.
67. @function add($x, $y) @return $x + $y
68. v .my-module padding: add(10px, 5px)
69. .my-module padding: add(10px, 5px) @function add($x, $y) @return $x + $y ...
71. target / context = result
72. target / context = result 650px / 1000px = 65%
73. target / context = result 650px / 1000px = 65% @function calc-p($target, $container) @return ($target / $container) * 100%
74. target / context = result 650px / 1000px = 65% @function calc-p($target, $container) @return ($target / $container) * 100% .my-module width: calc-p(650px, 1000px)
76. Reusable LOGIC
77. There are functions for colour, too!
78. $base: #2c3e50 darken($base, 8%) lighten($base, 8%) saturate(%base, 20%) desaturate(%base, 20%) adjust-hue($base, 20%) rgba($base, .5) tint($base, 10%) shade($base, 10%)
79. http://bit.ly/sass-colour
80. IFELSE
81. The @if directive takes a condition to evaluate and returns the nested styles if the condition is truthy (not false or null). Specifying what to return if the condition is falsey can be done using the @else statement.
82. http://bit.ly/sass-ifelse
83. [at]EACH
84. The @each directive takes the form @each $var in <list> $var can be any variable name, and <list> is a SassScript expression that returns a list
85. http://bit.ly/sass-each
86. MEDIa Queries
89. Yes, media queries can actually be simple!
90. http://bit.ly/sass-media
91. Still, we shouldn’t be spending our time writing mixins and extending all over the place. There’s gotta be something better.
92. COMPASS i’m lost... get me a
94. @import "compass/css3/border-radius" @import "compass/css3/transition" @import "compass/css3/opacity" @import "compass/css3/box-shadow" @import "compass/css3/text-shadow"
95. +single-box-shadow (rgba(0,0,0,0.3),0px,1px, 3px,false,true)
96. ADMIT I Must
97. on UI A WORD and UX
98. Our vision is optimized to see structure Know your user State visualization Focus Help User testing Aesthetics
99. And LOGIC Emotion
100. Envision your users, and design logically; it will yield emotion if you let it breathe.
101. CSS is Modular
102. CSS is scalable
103. CSS is design
104. CSS is code
105. CSS is smart
106. CSS is not alone
107. READ!
108. CREATE!
109. SHARE!
110. Make OUR Community Better
111. CULL & Surrender
112. @iamrvazquez rvazquez.ca THANK YOU