Download as PDF, PPTX
Uploaded bySuzette Franck
Intro to Sass for WordPress Developers
The document is a presentation by Suzette Franck on using SASS (Syntactically Awesome Style Sheets) for WordPress development, highlighting its benefits and features such as modularization, the use of variables, and mixins. It emphasizes SASS's efficiency in writing cleaner, reusable code and its compatibility with CSS, while also offering practical resources and starter themes. The session aimed to equip attendees with the knowledge to implement SASS in their projects immediately.
More Related Content
![[Worskhop Summits] CSS3 Workshop](https://cdn.slidesharecdn.com/ss_thumbnails/schmitt-css3-v4-100114155033-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Intro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
- 1. Intro to Sassfor WordPress Theme Developers WordCamp Salt Lake City 2015 by Suzette Franck
- 2. Who I Am HTMLand CSS teacher for Girl Develop It, Los Angeles Born in Hollywood, resides in So. California 20 Years Coding & Web Development Developed over 300 WordPress sites Spoken at 25 WordCamps Reg. Contributor: WPwatercooler.com
- 3. My Goal Teach youat least one thing you can put into practice right away
- 4. by Dan Cederholm SassFor Web Designers
- 5. What is Sass? SyntacticallyAwesome Style Sheets “Sass” not SASS & not S.A.S.S.
- 6.
- 7. Sass Basics Sass isa CSS pre-processor, outputs .CSS from .SCSS file Sass is a Ruby “Gem” or Application Gems need to be installed once on your computer World of pre-made additions (mixins) and other resources Two flavors: .SCSS (Sassy CSS) & .SASS .SCSS most closely resembles .CSS in syntax
- 8. “Getting Started withSass and Compass” thesassway.com/beginner/ getting-started-with-sass-and-compass by Adam Stacoviak
- 9.
- 10. Why is Sassbetter? Backwards Compatible with all versions CSS Fills holes in CSS: variables to represent values Calculates values: colors, lengths Bubbles up: Media Queries can be written within their element Supports Advanced Logic/if..then, while, else, etc. Adopted by WordPress Core team & GPL Compatible* * Reference: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor
- 11. How is Sass More Efficient? When writing code: DRY Don’t Repeat Yourself! Reduces HTTP requests with multiple stylesheets @import Helps you write more advanced code faster Cleaner, easier to read once you are familiar Using variables, make site-wide changes in fewer places Different output styles can be chosen depending on goals
- 12. Different Output Styles Nested(default) Expanded (closest to hand-crafted CSS) Compact (saves space) Compressed (saves most space, minified) Output style can be specified in your config.rb
- 13. Different Output Styles Expanded,Nested, Compact, Compressed Preference can be specified in your config.rb
- 14.
- 15. Rename your .cssfile with an .scss extension to get started Are Sass Files Hard to Create?
- 16. Compiling Your Sass Issuethe “compass watch” command in your project directory through Terminal or Command Prompt When you save changes, the .CSS is automatically compiled Adjust the values in your config.rb file as necessary to get desired output
- 17. Will it affectmy workflow? After initial setup, development is easier than before
- 18. Where Can IGet Sassified WordPress Starter Themes? All the cool kids are making starter themes from Underscores, Sass & different responsive grid systems, Here’s a few that I like, but feel free to explore!
- 19. “Underscores” WordPress Theme byAutomattic http://underscores.me/
- 20. “Heisenberg” WordPress Theme byZeek Interactive https://github.com/ ZeekInteractive/heisenberg
- 21. “Some Like itNeat” WordPress Theme by DigiSavvy https://github.com/digisavvy/ some-like-it-neat
- 22. “WD_S” WordPress Theme byWebDevStudios https://github.com/ webdevstudios/wd_s
- 23. “Roll Your Own”by You! Simplest most obvious solution is best Share your hard work on Github
- 24. Alrighty… Ready for some.SCSS Sassy CSS Code?
- 25. Alrighty… Ready for some.SCSS Sassy CSS Code?
- 26.
- 27. _partials.scss Partials are filesthat exist only as a fragment to be used in another file Partials are not complete by themselves, but they help you modularize your code Partials can be included in elaborate folder structures Begins with an _ and end with .scss Drop your partial folder on Sublime to open the folder - time saver!
- 28. Working with Partialsin Sublime
- 29. @import Modularize your CSSinto separate pages or partials Re-use your favorite mixins on all of your projects Compiled into one .css file at end Fewer HTTP requests - performance! Import others’ mixins and use them
- 30.
- 31. Nesting All TheThings Repeated selectors are nested inside curly braces & is a placeholder for the parent selector Namespaces can also be nested, ie font, background Compiled CSS will always be more verbose
- 32.
- 33.
- 34. $variables Finally! Variables forCSS! Declare in your .SCSS file like $name: value; Call by $name in your CSS Ability to change variables in one place and use everywhere Useful for defining colors in color palette, font stacks, grid systems Don’t forget 140 color names in CSS3! (Google it)
- 35.
- 36. @mixin Finally! Macros forCSS! Re-usable blocks of styles Define with @mixin declaration Call with @include Useful for CSS3 Vendor Prefixes Powerful with arguments Many pre-made mixins you can use in community Compass, Bourbon, GitHub, Your Own Library
- 37.
- 38.
- 39. darken, lighten, adjust-hue,saturate, desaturate, invert, compliment, etc. Full list at: http://sass-lang.com/documentation/Sass/Script/ Functions.html Hexidecimal # is calculated & output in final CSS Sass Color Functions
- 40.
- 41.
- 42.
- 43.
- 44. So… Who is goingto experiment with Sass?
- 45. Thank you toSiteGround! Highly Recommended Web Hosting for WordPress
- 46. Q & A AnyQuestions?
- 47. Thank you forbeing here! Suzette Franck Twitter: @suzette_franck linkedin & speakerdeck & slideshare