Getting started with SASS

Transcript

1. Getting started with SASS
2. Bogdan Dragomir @BogdanDragomir goo.gl/mK1k4o Slides available at
3. Assumptions 1. You are familiar with CSS 2. You are interested in theme development 3. You know how to use Google
4. My goal You get at least one thing you can put in practice right away
5. The Plan 1. What is SASS and why we use it 2. How to install it 3. Getting the basics 4. Q&A
6. What is ? Syntactically Awesome Stylesheets "CSS with superpowers" sass-lang.com
7. Why we use it? 1. Easy to learn and use 2. Styles becomes modular and easier to maintain 3. Backward compatible with CSS * 4. Allows for the use of variables to calculate layout widths, generate color schemes, font sizes, etc. 5. Reduces HTTP requests when stylesheets are combined into one 6. It's team friendly 7. …
8. How to install SASS is a ruby gem Command line gem install sass Koala  CodeKit
9. The Basics 2 flavors .sass .scss only .scss is backward compatible with CSS more
10. Project Setup cd path/to/your/theme sass --watch sass/input.scss:css/output.css
11. .scss .css
12. Table of Contents: 1.0 - Reset 2.0 - Repeatable Patterns 3.0 - Basic Structure 4.0 - Header 5.0 - Navigation 6.0 - Content 6.1 - Post Thumbnail 6.2 - Entry Header 6.3 - Entry Meta 6.4 - Entry Content 6.5 - Galleries 6.6 - Post Formats 6.7 - Post/Image/Paging Navigation 6.8 - Attachments 6.9 - Archives 6.10 - Contributor Page 6.11 - 404 Page 6.12 - Full-width 6.13 - Singular 6.14 - Comments 7.0 - Sidebar 7.1 - Widgets 7.2 - Content Sidebar Widgets 8.0 - Footer 9.0 - Featured Content 10.0 - Multisite 11.0 - Media Queries 12.0 - Print Twenty fourteen stylesheet
13. // This is a comment that will not be rendered in the output.css /* This is a comment that will be visible in the output.css */ @import "reset"; @import "repeatable-patterns"; @import "basic-structure"; @import "navigation"; @import "content/post-thumbnail"; @import "content/entry-header"; @import "content/galleries"; @import "content/post-formats"; @import "content/post"; @import "content/image"; @import "content/paging-navigation"; input.scss SASS/ input.scss _reset.scss _repeatable-patterns.scss _basic-structure.scss _header.scss _navigation.scss CONTENT/ _post-thumbnail.scss _entry-header.scss _entry-meta.scss _entry-content.scss _galleries.scss _post-formats.scss _post.scss _image.scss _paging-navigation.scss ... CSS/ output.css Theme folder Partials
14. Variables $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
15. Nesting nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
16. nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } } }
17. // Parent selector a { display:inline-block; color: red; font-size: 1.1em; .title & { color: blue; } } SASS a { display:inline-block; color: red; font-size: 1.1em; } .title a { color: blue; } CSS
18. Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } more
19. Extend/Inheritance .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; }
20. Calculations $grid: 50px; article { width: $grid*8; } aside{ width: $grid*4; }
21. Functions $red: #ff0000; a { color: $red; &:hover { color: darken($red, 10%); } } more
22. Resources 1. sass-lang.com 2. thesassway.com/beginner 3. sassmeister.com 4. incident57.com/codekit 5. koala-app.com
23. Thank you! Questions? @BogdanDragomir goo.gl/mK1k4o Slides available at