SASS for WordPress Workshop
-
Upload
kanchha-kaji-prajapati -
Category
Technology
-
view
235 -
download
0
Transcript of SASS for WordPress Workshop
![Page 1: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/1.jpg)
SASS for WordPress
#WCKTM 2016
![Page 2: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/2.jpg)
Ritesh SakyaTeam Lead / Front-end Developer
at WEN
Kanchha Kaji PrajapatiCo-founder / Front-end Developer
at eVision Themes@creativekaji
Mishal RaiFront-end Developer
at Eagle Vision IT
SPEAKERS
![Page 3: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/3.jpg)
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/Xammp6. Installed WordPress ( Latest version )
Recommended:- Installation7. Installed Ruby8. Installed Ruby SASS9. Underscores Sassify theme named "wcktm-sass“
![Page 4: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/4.jpg)
TABLE OF CONTENT
Part 1: 25 minutes- Introduction of SASS
Part 2: 10 minutes- Project Setup Description
1. Ruby and SASS Installation2. WordPress and Theme Setup3. Files/Folders Structure
Part 3: 45 minutes- Workshop
1. Mockup SlicingPart 4: 10 minutes
- Q & A Session
![Page 5: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/5.jpg)
INTRO to
![Page 6: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/6.jpg)
WHAT IS SASS?
• Syntactically Awesome StyleSheets • Preprocessor for CSS• SASS is an extension of CSS• SASS makes CSS fun again
![Page 7: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/7.jpg)
WHY USE SASS?
• Programming of CSS• Create more manageable, reusable and clean code• Can fast deliver project from less effort
![Page 8: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/8.jpg)
SASS & SCSS
#selectorcolor: $text-colorfont-size: $text-colora color: $link-color
FORMATTING CONVENTIONS
#selector {color: $text-color;font-size: $text-color;a { color: $link-color; }}
SASS SCSS
![Page 9: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/9.jpg)
SASS has 5 primary features
1. Variables
2. Nesting
3. Mixin
4. Partials
5. Extent/Inheritance
![Page 10: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/10.jpg)
Variables
Example:
SCSS CSS Output
$primary-color: #333;
body { color: $primary-color;}
![Page 11: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/11.jpg)
NestingExample:
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; } } }}
}
![Page 12: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/12.jpg)
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); }
![Page 13: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/13.jpg)
Partial
Example:
// _reset.scss
html,body,ul,ol { margin: 0; padding: 0;}
// base.scss
@import 'reset';
body { font: 100% sans-serif; background-color: #efefef;}
![Page 14: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/14.jpg)
Extend/Inheritance
Example:
SCSS CSS Output
.message { border: 1px solid #ccc; padding: 10px; color: #333;}
.success { @extend .message; border-color: green;}
![Page 15: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/15.jpg)
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;}
![Page 16: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/16.jpg)
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
![Page 17: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/17.jpg)
Parent selector, content
Example:
SCSS CSS Output
Parent selector.wrapper{
a{ &:hover{ }}
}
content@include media(md){ h1{
font-size:20px; }}
![Page 18: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/18.jpg)
Variable declaration and print
Example:
![Page 19: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/19.jpg)
Color function
![Page 20: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/20.jpg)
Each and Nth function
![Page 21: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/21.jpg)
Custom function
// must return
![Page 22: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/22.jpg)
Loop
1) For
2) while
![Page 23: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/23.jpg)
Some other function
1) New version sass feature
![Page 24: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/24.jpg)
SetupSASS PROJECT
![Page 25: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/25.jpg)
RUBY INSTALLATIONapt (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/ )
WindowsGo 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
![Page 26: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/26.jpg)
SASS INSTALLATION
$ gem install sass
Download the file manually:https://rubygems.org/pages/download
$ sass –v
![Page 27: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/27.jpg)
Watch SASS file
sass ––watch sass/style.scss:style.css ––style expanded
![Page 28: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/28.jpg)
SASS output style
:nested:compact:expanded:compressed
:nested
![Page 29: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/29.jpg)
expanded
Compact
Compressed
![Page 30: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/30.jpg)
SETUP WORDPRESS
* Download latest WordPress from wordpress.org* Create a database* Run setup from browser
![Page 31: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/31.jpg)
Download Theme from Underscores.me
![Page 32: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/32.jpg)
PROJECT FILE/FOLDERSTRUCTURE
![Page 33: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/33.jpg)
WORDPRESS SASS STRUCTURE
![Page 34: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/34.jpg)
Let’s StartWORKSHOP
![Page 35: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/35.jpg)
ASSETS
Short Url:https://goo.gl/vsFgjS
live link:http://creativekaji.com/sass
![Page 36: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/36.jpg)
MOCKUP
![Page 37: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/37.jpg)
MAPPING WITH WP SASS
![Page 38: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/38.jpg)
DEMO OnCUSTOMIZE MENU
PANEL WITH
SASS & PHP Complier
![Page 39: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/39.jpg)
Reference Links
http://sass-lang.com/guide
https://www.ruby-lang.org/en/documentation/installation/#rubyinstaller
http://underscores.me/
![Page 40: SASS for WordPress Workshop](https://reader034.fdocuments.us/reader034/viewer/2022051503/58a6226b1a28ab416c8b499d/html5/thumbnails/40.jpg)
THANK YOU ☺
ANY QUESTION?