Download - Using Sass in Your WordPress Projects
![Page 1: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/1.jpg)
Using Sass in Your WordPress Projects
Kansas City WordCamp - July 12, 2014 !
![Page 2: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/2.jpg)
Jeremy Green WordPress Developer at Endo Creative Organizer of the Fort Collins WordPress Meetup !@greenhornet79 !endocreative.com !
![Page 3: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/3.jpg)
CSS Today !
![Page 4: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/4.jpg)
Bert Bos, CSS co-inventor: !
“CSS stops short of even more powerful features that programmers use in their
programming languages: macros, variables, symbolic constants, conditionals,
expressions over variables, etc. That is because these things give power-users a lot
of rope, but less experienced users will unwittingly hang themselves.”
![Page 5: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/5.jpg)
Vanilla CSS
![Page 6: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/6.jpg)
Putting the Power into CSS
![Page 7: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/7.jpg)
CSS Preprocessors
![Page 8: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/8.jpg)
Sass Syntactically Awesome Style Sheets
![Page 9: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/9.jpg)
A CSS preprocessor that lets you write CSS:
!
• faster
• more efficient
• more maintainable
CSS with superpowers
![Page 10: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/10.jpg)
A few of my favorite things
![Page 11: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/11.jpg)
Nesting
![Page 12: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/12.jpg)
CSS SCSS
![Page 13: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/13.jpg)
Variables
![Page 14: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/14.jpg)
!
• similar to php variables • turn repetitive values into variables • define it once, use it throughout your projects
![Page 15: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/15.jpg)
Partials
![Page 16: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/16.jpg)
!
• prepend partials with an underscore • split CSS into maintainable blocks of code • only one HTTP request!
![Page 17: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/17.jpg)
! Folders!
![Page 18: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/18.jpg)
Extends
![Page 19: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/19.jpg)
!
• reuse a snippet of CSS • does not accept any parameters • same styles as another class, except for a few rules
![Page 20: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/20.jpg)
Silent Placeholder
![Page 21: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/21.jpg)
Mixins
![Page 22: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/22.jpg)
!
• accepts parameters like a function • use for tedious tasks like vendor prefixes • reusable block of CSS, but with parameters
![Page 23: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/23.jpg)
Inline Media Queries
![Page 24: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/24.jpg)
!
• create a media query mix-in • set breakpoints for your design • use logic and return content in a mixin
![Page 25: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/25.jpg)
!
• use @include to call the mixin • stack media queries for different breakpoints • any rules inside media query will be added to CSS
SCSS Compiled
![Page 26: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/26.jpg)
Small Investment
Big Reward
![Page 28: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/28.jpg)
Command Line
gem install sass
![Page 29: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/29.jpg)
Watch the files
sass --watch global.scss:global.css
![Page 30: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/30.jpg)
Applications
![Page 31: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/31.jpg)
The App Way
Open app, make changes, save file
![Page 32: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/32.jpg)
Your First Project
![Page 33: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/33.jpg)
Watch your files
![Page 34: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/34.jpg)
Configure options
![Page 35: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/35.jpg)
Compressed = Fastest
![Page 36: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/36.jpg)
Let’s Precompile
![Page 37: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/37.jpg)
Don’t touch that file
Live is .scss land now
![Page 38: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/38.jpg)
One bite at a time !
!
you don’t have to use everything at once
![Page 39: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/39.jpg)
WordPress Integration !
!
![Page 40: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/40.jpg)
Update functions.php !
! Use style.css (old way)
Use css/global.css (new way)
![Page 41: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/41.jpg)
Stripped down style.css !
!
!
• comments for theme details • alert future developers about the theme using Sass
![Page 42: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/42.jpg)
Use in a plugin !
!
!
• good even for small projects • use wp_enqueue_style to enqueue css file • split front and back end styles
![Page 43: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/43.jpg)
Gravity Forms !
!
![Page 44: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/44.jpg)
Tips for Integration !
!!
• make sure to update css and scss files on server • give option to edit css if needed • create a partial for overriding plugin styles • app is nice when you work on 10 projects a day
![Page 45: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/45.jpg)
Additional Tools !
!
![Page 46: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/46.jpg)
!
• CSS3 mixins • helper functions (colors, math, and much more) • generate sprites dynamically
![Page 47: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/47.jpg)
Susy !
!
!
• Sass grid system (or not) • creates layouts using mixins • calculate column and gutter widths
![Page 48: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/48.jpg)
Breakpoint !
!
!
• media queries with Sass • includes lots of helpful tools
![Page 49: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/49.jpg)
Final Thoughts !
!
!
• Sass won’t make you write better CSS • Sass won’t build an awesome WP theme • Don’t be afraid to try something new
!
![Page 50: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/50.jpg)
Resources !
!
!
• sass-lang.com • sassmeister.com • Compass • Susy • Breakpoint • Sass for Web Designers • CSS Tricks Screencast
![Page 51: Using Sass in Your WordPress Projects](https://reader033.vdocument.in/reader033/viewer/2022051816/5462e660af79599a128b489c/html5/thumbnails/51.jpg)
Thank You!
@greenhornet79