Designing with SASS

A short intro into SASS and a look into how we can use it for advanced design techniques.

Transcript

1. DevMynd Designing with SASS
 Tony Coconate
2. DevMynd Who Is This Guy?
3. DevMynd @tonycoco
4. DevMynd DevMynd I work at
5. DevMynd Selfie Slide I’m a weekend designer. ! I’m a Ruby developer. ! I’m a JavaScript developer. ! I’m a Computer Scientist. ! I’m a recovering milkshake-aholic. ! I’m an open-source contributor.
6. DevMynd CSS: By The Numbers 98.8135% Websites Using CSS 35.9%‐ CSS3 Usage Increase 52,181‑ Crazy People Still Using IE6 75.6%‐ Developers Pulling Their Hair Out
7. DevMynd I just made that all up. ! How could I possibly get that sort of data to the fourth decimal place?
8. DevMynd CSS Problems CSS Preprocessors Advantages The SASS Language Demo Q & A What Are We Doing Here?
9. DevMynd CSS: The Problems
10. DevMynd CSS was built to separate a document’s content from its presentation.
11. DevMynd
12. DevMynd
13. DevMynd Not do things like this…
14. DevMynd
15. DevMynd CSS is moving in the right direction, but for now we can use CSS preprocessors to help shim in the functionality that we need in a modern language.
16. DevMynd CSS Preprocessors: What Are They Good For?
17. DevMynd D.R.Y.
18. DevMynd .hello { font-family: sans-serif; font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.2; color: #ddd; } ! .something { font-family: sans-serif; font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.2; color: #ddd; } ! .something .nested { width: 200px; }
19. DevMynd $gray: #ddd; ! .hello { font-family: sans-serif; font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.2; color: $gray; } ! .something { font-family: sans-serif; font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.2; color: $gray; } ! .something .nested { width: 200px; }
20. DevMynd $gray: #ddd; ! .hello { font-family: sans-serif; font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.2; color: $gray; } ! .something { @extend .hello; } ! .something .nested { width: 200px; }
21. DevMynd $gray: #ddd; ! .hello { font-family: sans-serif; font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.2; color: $gray; } ! .something { @extend .hello; .nested { width: 200px; } }
22. DevMynd Organization
23. DevMynd // BEGIN - Screen: Layout // … // Like, a billion CSS rules // … // END - Screen: Layout
24. DevMynd Folders: Separate It Up ├── print/ │ ├── _layout.scss │ ├── _typography.scss │ └── _variables.scss ├── screen/ │ ├── _layout.scss │ ├── _mixins.scss │ ├── _typography.scss │ └── _variables.scss ├── print.scss └── screen.scss
25. DevMynd Partials: Putting Them Together // screen.scss ! @import “bourbon”; @import “neat"; @import “screen/variables"; @import “screen/mixins”; @import “screen/typography"; @import “screen/layout";
26. DevMynd Mixins
27. DevMynd @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } ! .box { @include border-radius(10px); }
28. DevMynd .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
29. DevMynd Operators
30. DevMynd .box { width: 100px / (2 + 2); }
31. DevMynd Functions
32. DevMynd p { color: hsl(0, 100%, 50%); }
33. DevMynd The &
34. DevMynd a { color: green; } ! a:hover { color: red; }
35. DevMynd a { color: green; ! &:hover { color: red; } }
36. DevMynd Frameworks
37. DevMynd
38. DevMynd Demo
39. DevMynd http://goo.gl/hh5dyA
40. DevMynd Absolute Centering
41. DevMynd .box { margin: 0px auto; }
42. DevMynd
43. DevMynd
44. DevMynd
45. DevMynd
46. DevMynd
47. DevMynd • In the normal content flow, margin: auto; equals 0 for the top and bottom. ! • position: absolute; breaks the block out of the typical content flow, rendering the rest of the content as if that block weren’t there. ! • Setting top: 0; right: 0; bottom: 0; left: 0; gives the renderer a new bounding box for the block. ! • Giving the block a width or a height prevents the block from taking up all available space and forces the browser to calculate margin: auto; based on the new bounding box.
48. DevMynd The Long Shadow
49. DevMynd
50. DevMynd
51. DevMynd
52. DevMynd
53. DevMynd