Getting Sassy with CSS: An Introduction to Writing CSS with Sass

Transcript

1. Getting Sassy with CSS Erin Smith
2. What we are covering: What are CSS preprocessors What advantages do they have How to get set up to use them yourself
5. Input Output
6. Basics .scss .sass Uses CSS syntax Indentation instead of brackets Newlines instead of semicolons Other modifications Can be easier to read and write
7. $variables
8. SCSS CSS $yellow: #fce473; .quote { border-left: 5px solid $yellow; } .quote { border-left: 5px solid #fce473; }
9. SCSS CSS $yellow: #fce473; $pink: #c71585; $green: #32cd32; $blue: #1d90ff; $primary-color: $green; .quote { border-left: 5px solid $primary-color; } .button { background: $primary-color; } .sidebar a:hover { border-bottom-color: $primary-color; } .footer a { color: $primary-color; } .quote { border-left: 5px solid #32cd32; } .button { background: #32cd32; } .sidebar a:hover { border-bottom-color: #32cd32; } .footer a { color: #32cd32; }
10. SCSS CSS $yellow: #fce473; $pink: #c71585; $green: #32cd32; $blue: #1d90ff; $primary-color: $pink; .quote { border-left: 5px solid $primary-color; } .button { background: $primary-color; } .sidebar a:hover { border-bottom-color: $primary-color; } .footer a { color: $primary-color; } .quote { border-left: 5px solid #c71585; } .button { background: #c71585; } .sidebar a:hover { border-bottom-color: #c71585; } .footer a { color: #c71585; }
11. Math
12. $numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
13. Nesting
14. SCSS CSS nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
15. @imports
17. SCSS //main.scss /* base */ @import “base/reset”; @import “base/typography”; /* components */ @import “components/buttons”; @import “components/nav”; @import “components/dropdown”; |— base/ | |— _reset.scss #Reset/normalize | |— _typography.scss #Typography rules | |— components/ | |— _buttons.scss #Buttons | |— _navigation.scss #Navigation | |— _dropdown.scss #Dropdown
18. @mixins
19. SCSS CSS @mixin overlay() { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .modal-background { @include overlay(); background: black; opacity: 0.9; } .modal-background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: black; opacity: 0.9; }
20. SCSS CSS @mixin overlay() { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .modal-background { @include overlay(); background: black; opacity: 0.9; } .product-link { @include overlay(); background: blue; opacity: 0.6; } .modal-background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: black; opacity: 0.9; } .product-link { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: blue; opacity: 0.6; }
21. SCSS CSS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(3px); } .box { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; }
22. $numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); @mixin columnMaker($numPerRow, $margin) { width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) { margin-bottom: $margin; margin-right: $margin; } &:nth-child(#{$numPerRow}n) { margin-right: 0; margin-bottom: 0; } }
23. @extend
24. SCSS CSS %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } %equal-heights { display: flex; flex-wrap: wrap; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; } .warning { @extend %message-shared; border-color: yellow; } .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
25. @extend - rulesets are inherently related - near to each other in the code @mixin - inject dynamic values into repeated construct - Sassy copy/paste
26. Loops
27. @if @for @each @while
28. SCSS CSS $list: adam john wynn mason kuroir; @mixin author-images { @each $author in $list { .photo-#{$author} { background: image-url(‘/images/#{$author}.png’) no-repeat; } } } .author-bio { @include author-images; } .author-bio .photo-adam { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-john { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-wynn { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-mason { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-kuroir { background: url(‘/images/adam.png’) no-repeat; }
29. Pre-built Functions
30. lighten($color, $amount) grayscale($color) complement($color) unquote($string) to-upper-case($string) random()
31. $notification-confirm: hsla(101, 72%, 37%, 1); $notification-warning: #ffc53a; $notification-alert: rgb(172, 34, 34); %notification { border-radius: 10px; display: block; font-size: 1.5em; font-family: sans-serif; padding: 1em 2em; margin: 1em auto; width: 30%; text-align: center; } SCSS
32. @function set-notification-text-color($color) { @if (lightness($color) > 50) { @return #000000; } @else { @return #ffffff; } } .notification { @extend %notification; } .notification-confirm { background: $notification-confirm; color: set-notification-text-color($notification-confirm); } .notification-warning { background: $notification-warning; color: set-notification-text-color($notification-warning); } .notification-alert { background: $notification-alert; color: set-notification-text-color($notification-alert); } SCSS
33. Getting Started WordPress.com Plugin WP-SCSS Command Line NPM: nom install -g sass Chocolatey: choco install sass Homebrew: brew install sass/sass/sass sass styles.scss styles.css Application CodeKit Compass.app Koala PHPStorm
34. Resources: sass-lang.com marksheet.io thesassway.com sassisfaction.com