1. The document outlines a workshop on using SASS for WordPress themes. It will cover installing SASS and setting up a WordPress development environment, the basics of SASS including variables, nesting, mixins and more, and a hands-on workshop to slice a mockup design and implement it using SASS. 2. Attendees are instructed to bring a laptop with Photoshop, a text editor like Sublime Text, WordPress installed and Ruby and SASS installed. 3. The workshop consists of an introduction to SASS, setting up the project files and structure, and a mockup slicing workshop followed by a Q&A session.

1. SASS for WordPress
#WCKTM 2016

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. 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. 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. INTRO to

6. WHAT IS SASS?
• Syntactically Awesome StyleSheets
• Preprocessor for CSS
• SASS is an extension of CSS
• SASS makes CSS fun again

7. WHY USE SASS?
• Programming of CSS
• Create more manageable, reusable and clean code
• Can fast deliver project from less effort

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. SASS has 5 primary features
1. Variables
2. Nesting
3. Mixin
4. Partials
5. Extent/Inheritance

10. Variables
Example:
SCSS CSS Output
$primary-color: #333;
body {
color: $primary-color;
}

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. 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. 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. Extend/Inheritance
Example:
SCSS CSS Output
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}

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. 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. Parent selector, content
Example:
SCSS CSS Output
Parent selector
.wrapper{
a{
&:hover{
}
}
}
content
@include media(md){
h1{
font-size:20px;
}
}

18. Variable declaration and print
Example:

19. Color function

20. Each and Nth function

21. Custom function
// must return

22. Loop
1) For
2) while

23. Some other function
1) New version sass feature

24. Setup
SASS PROJECT

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. SASS INSTALLATION
$ gem install sass
Download the file manually:
https://rubygems.org/pages/download
$ sass –v

27. Watch SASS file
sass ––watch sass/style.scss:style.css ––style expanded

28. SASS output style
:nested
:compact
:expanded
:compressed
:nested

29. expanded
Compact
Compressed

30. SETUP WORDPRESS
* Download latest WordPress from wordpress.org
* Create a database
* Run setup from browser

31. Download Theme from Underscores.me

32. PROJECT FILE/FOLDER
STRUCTURE

33. WORDPRESS SASS STRUCTURE

34. Let’s Start
WORKSHOP

35. ASSETS
Short Url:
https://goo.gl/vsFgjS
live link:
http://creativekaji.com/sass

36. MOCKUP

37. MAPPING WITH WP SASS

38. DEMO On
CUSTOMIZE MENU PANEL
WITH
SASS & PHP Complier

39. Reference Links
http://sass-lang.com/guide
https://www.ruby-lang.org/en/documentation/installation/#rubyinstaller
http://underscores.me/

40. THANK YOU ☺
ANY QUESTION?