SASS for WordPress

#WCKTM 2016

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

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“

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

INTRO to

WHAT IS SASS?

• Syntactically Awesome StyleSheets • Preprocessor for CSS• SASS is an extension of CSS• SASS makes CSS fun again

WHY USE SASS?

• Programming of CSS• Create more manageable, reusable and clean code• Can fast deliver project from less effort

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

SASS has 5 primary features

1. Variables

2. Nesting

3. Mixin

4. Partials

5. Extent/Inheritance

Variables

Example:

SCSS CSS Output

$primary-color: #333;

body { color: $primary-color;}

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; } } }}

}

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); }

Partial

Example:

// _reset.scss

html,body,ul,ol { margin: 0; padding: 0;}

// base.scss

@import 'reset';

body { font: 100% sans-serif; background-color: #efefef;}

Extend/Inheritance

Example:

SCSS CSS Output

.message { border: 1px solid #ccc; padding: 10px; color: #333;}

.success { @extend .message; border-color: green;}

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;}

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

Parent selector, content

Example:

SCSS CSS Output

Parent selector.wrapper{

a{ &:hover{ }}

}

content@include media(md){ h1{

font-size:20px; }}

Variable declaration and print

Example:

Color function

Each and Nth function

Custom function

// must return

Loop

1) For

2) while

Some other function

1) New version sass feature

SetupSASS PROJECT

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

SASS INSTALLATION

$ gem install sass

Download the file manually:https://rubygems.org/pages/download

$ sass –v

Watch SASS file

sass ––watch sass/style.scss:style.css ––style expanded

SASS output style

:nested:compact:expanded:compressed

:nested

expanded

Compact

Compressed

SETUP WORDPRESS

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

Download Theme from Underscores.me

PROJECT FILE/FOLDERSTRUCTURE

WORDPRESS SASS STRUCTURE

Let’s StartWORKSHOP

ASSETS

Short Url:https://goo.gl/vsFgjS

live link:http://creativekaji.com/sass

MOCKUP

MAPPING WITH WP SASS

DEMO OnCUSTOMIZE MENU

PANEL WITH

SASS & PHP Complier

Reference Links

http://sass-lang.com/guide

https://www.ruby-lang.org/en/documentation/installation/#rubyinstaller

http://underscores.me/

THANK YOU ☺

ANY QUESTION?