Successfully reported this slideshow.
Your SlideShare is downloading. ×

SASS for WordPress Workshop

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
HTML/CSS for WordPress
HTML/CSS for WordPress
Loading in …3
×

Check these out next

1 of 40 Ad

More Related Content

Slideshows for you (20)

Similar to SASS for WordPress Workshop (20)

Advertisement

Recently uploaded (20)

SASS for WordPress Workshop

  1. 1. SASS for WordPress #WCKTM 2016
  2. 2. Ritesh Sakya Team Lead / Front-end Developer at WEN Kanchha Kaji Prajapati Co-founder / Front-end Developer at eVision Themes @creativekaji Mishal Rai Front-end Developer at Eagle Vision IT SPEAKERS
  3. 3. For the Workshop Participation: Required: 1. Have a good knowledge of HTML and CSS 2. Bring your own Laptop with fully charged. 3. Photoshop Installed in your PC ( Latest version recommended ) 4. Text editor ( Sublime Text recommended ) 5. Wamp/Xammp 6. Installed WordPress ( Latest version ) Recommended: - Installation 1. Installed Ruby 2. Installed Ruby SASS 3. Underscores Sassify theme named "wcktm-sass“
  4. 4. TABLE OF CONTENT Part 1: 25 minutes - Introduction of SASS Part 2: 10 minutes - Project Setup Description 1. Ruby and SASS Installation 2. WordPress and Theme Setup 3. Files/Folders Structure Part 3: 45 minutes - Workshop 1. Mockup Slicing Part 4: 10 minutes - Q & A Session
  5. 5. INTRO to
  6. 6. WHAT IS SASS? • Syntactically Awesome StyleSheets • Preprocessor for CSS • SASS is an extension of CSS • SASS makes CSS fun again
  7. 7. WHY USE SASS? • Programming of CSS • Create more manageable, reusable and clean code • Can fast deliver project from less effort
  8. 8. SASS & SCSS #selector color: $text-color font-size: $text-color a color: $link-color FORMATTING CONVENTIONS #selector { color: $text-color; font-size: $text-color; a { color: $link-color; } } SASS SCSS
  9. 9. SASS has 5 primary features 1. Variables 2. Nesting 3. Mixin 4. Partials 5. Extent/Inheritance
  10. 10. Variables Example: SCSS CSS Output $primary-color: #333; body { color: $primary-color; }
  11. 11. Nesting Example: SCSS CSS Output nav { ul { list-style: none; margin: 0; padding: 0; li { display: inline-block; a { display: block; padding: 6px 12px; text-decoration: none; } } } }
  12. 12. Mixin Example: SCSS CSS Output @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
  13. 13. Partial Example: // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% sans-serif; background-color: #efefef; }
  14. 14. Extend/Inheritance Example: SCSS CSS Output .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; }
  15. 15. Placeholder selector Example: SCSS CSS Output %message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend %message; border-color: green; } .danger { @extend %message; border-color: red; }
  16. 16. Other Features 1) Parent selector, @content 2) Variable declaration and Print 3) Color function 4) Each and Nth function 5) Custom function 6) For and While Loop 7) Some use other functions
  17. 17. Parent selector, content Example: SCSS CSS Output Parent selector .wrapper{ a{ &:hover{ } } } content @include media(md){ h1{ font-size:20px; } }
  18. 18. Variable declaration and print Example:
  19. 19. Color function
  20. 20. Each and Nth function
  21. 21. Custom function // must return
  22. 22. Loop 1) For 2) while
  23. 23. Some other function 1) New version sass feature
  24. 24. Setup SASS PROJECT
  25. 25. RUBY INSTALLATION apt (Debian or Ubuntu) $ sudo apt-get install ruby-full pacman (Arch Linux) $ sudo pacman -S ruby Homebrew (OS X) (Mac) $ sudo homebrew $ brew install ruby (If your pc have not installed Homebrew then go to http://brew.sh/ ) Windows Go to http://rubyinstaller.org/downloads/ and download latest version Ruby 2.3.1 or Ruby 2.3.1 (x64) . For Other visit official site: https://www.ruby-lang.org/en/documentation/installation/#rubyinstaller $ ruby -v
  26. 26. SASS INSTALLATION $ gem install sass Download the file manually: https://rubygems.org/pages/download $ sass –v
  27. 27. Watch SASS file sass ––watch sass/style.scss:style.css ––style expanded
  28. 28. SASS output style :nested :compact :expanded :compressed :nested
  29. 29. expanded Compact Compressed
  30. 30. SETUP WORDPRESS * Download latest WordPress from wordpress.org * Create a database * Run setup from browser
  31. 31. Download Theme from Underscores.me
  32. 32. PROJECT FILE/FOLDER STRUCTURE
  33. 33. WORDPRESS SASS STRUCTURE
  34. 34. Let’s Start WORKSHOP
  35. 35. ASSETS Short Url: https://goo.gl/vsFgjS live link: http://creativekaji.com/sass
  36. 36. MOCKUP
  37. 37. MAPPING WITH WP SASS
  38. 38. DEMO On CUSTOMIZE MENU PANEL WITH SASS & PHP Complier
  39. 39. Reference Links http://sass-lang.com/guide https://www.ruby-lang.org/en/documentation/installation/#rubyinstaller http://underscores.me/
  40. 40. THANK YOU ☺ ANY QUESTION?

×