WordPress with SASSLESS© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subj...
Who am I•     Ran Bar-Zik  @barzik•     Software Developer at HP Software R&D•     Working at HP Live Network project.•   ...
Variables in SASS$some-color: #fefecc;p {                    color: $some-color;}a {                    border-bottom: $so...
Mixins in SASS@mixin RoundBorders ($radius: 5px) {  border-radius: $radius;}p {@include RoundBorders ();}a {@include Round...
Nestinga {text-deocration: none;   &:hover {       text-decoration:underline;   }} © Copyright 2012 Hewlett-Packard Develo...
CSS code  h1 {    font-family: "Arial Black";    font-weight: normal;    font-size: 30px;    color: #fefecc;    letter-spa...
SASS code  @mixin headerMaker ($size: 10px) {               $header-color: #fefecc;      font-family: "Arial Black";      ...
Why using SASSLESS ?• Developers that create new themes• Developers that maintain long-term applications  and sites.• Deve...
How is SASSLESS is working                                                                                  CSS preprocess...
SASS preprocessors• On Linux everything is easy:  SASS: sass –watch input_dir:output_dir• On Windows:  Scout © Copyright 2...
SASS: Variables• Defined by $.Example:$some-var: #000000;.someClass {     color: $some-var;} © Copyright 2012 Hewlett-Pack...
SASS: VariablesWill be compiled to:.someClass {      color: #000000;} © Copyright 2012 Hewlett-Packard Development Company...
Variables can be anything!•     Colors•     Numbers•     Text•     List•     Boolean    © Copyright 2012 Hewlett-Packard D...
Variables can be changed!$some-size: 15px;h1 {                    font-size: $some-size*2;}h6 {                    font-si...
SASS functions$some-color: #fefefe;a {                 color: $some-color;}a:hover {    color: lighten($some-color, 20%);}...
It will be compiled to:a {  color: #fefe45;}a:hover {  color: #ffffaa;} © Copyright 2012 Hewlett-Packard Development Compa...
SASS nesting.someClass a {  color: #fefe45;}.someClass p {  color: #000000;} © Copyright 2012 Hewlett-Packard Development ...
SASS nesting.someClass {    a {        color: #fefe45;    }    p {      color: #000000;    }} © Copyright 2012 Hewlett-Pac...
SASS Nesting and reference  SCSS Sourcea {                    color: #fefe45;                    &:hover {                ...
SASS Nesting and reference  CSS outputa {  color: #fefe45;}a:hover {  color: #fff;} © Copyright 2012 Hewlett-Packard Devel...
SASS mixins• The SASS “functions”• The main way to divide the CSS code to  small, reusable parts.• Clusters of mixins can ...
SASS mixin - example@mixin my-great-mixin() {         color: #000;         font-size: 14px;}p {         @include my-great-...
SASS mixin - outputp {  color: #000;  font-size: 14px;}a {  color: #000;  font-size: 14px;}  © Copyright 2012 Hewlett-Pack...
SASS BIDI© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change ...
How to use SASSLESS on existing WordPress project?• Copy style.css & rtl.css to style.scss & rtl.scss.• Run scoutother pre...
SASSLESS on WordPress –bones base theme© Copyright 2012 Hewlett-Packard Development Company, L.P. The information containe...
Directory tree• Create SCSSLESS directory and CSS directory © Copyright 2012 Hewlett-Packard Development Company, L.P. The...
SCSS directory• Put all the SCSS files in the SCSS directory• Make sure that there is a style.scss file. © Copyright 2012 ...
The compiled CSS file will be at the CSS directory• We need to make sure that WordPress will  point the theme style to  my...
Using after setup theme hook•    to add custom CSS file      At functions.php:add_action(after_setup_theme,my_theme_setup_...
At the style.scss• Use import & media queries to import  _files.scss according to device features. © Copyright 2012 Hewlet...
Thank you© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change ...
Upcoming SlideShare
Loading in …5
×

Using SASS in the WordPress environment - Ran Bar Zik

1,286
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,286
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Using SASS in the WordPress environment - Ran Bar Zik

  1. 1. WordPress with SASSLESS© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  2. 2. Who am I• Ran Bar-Zik @barzik• Software Developer at HP Software R&D• Working at HP Live Network project.• My professional site: internet-israel.com © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  3. 3. Variables in SASS$some-color: #fefecc;p { color: $some-color;}a { border-bottom: $some-color;}strong { background-color: $some-color;}.someClass { border: $some-color solid 1px;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  4. 4. Mixins in SASS@mixin RoundBorders ($radius: 5px) { border-radius: $radius;}p {@include RoundBorders ();}a {@include RoundBorders ();}strong {@include RoundBorders ();}.someClass {@include RoundBorders ();} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  5. 5. Nestinga {text-deocration: none; &:hover { text-decoration:underline; }} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  6. 6. CSS code h1 { font-family: "Arial Black"; font-weight: normal; font-size: 30px; color: #fefecc; letter-spacing: -1px; } h1:hover { text-decoration: underline; } h2 { font-family: "Arial Black"; font-weight: normal; font-size: 20px; color: #fefecc; letter-spacing: -1px; } h2:hover { text-decoration: underline; } h3 { font-family: "Arial Black"; font-weight: normal; font-size: 15px; color: #fefecc; letter-spacing: -1px; } h3:hover { text-decoration: underline; }}© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  7. 7. SASS code @mixin headerMaker ($size: 10px) { $header-color: #fefecc; font-family: "Arial Black"; font-weight: normal; font-size: $size; color: $header-color; letter-spacing: -1px; &:hover { text-decoration: underline; } } h1 { @include headerMaker(30px); } h2 { @include headerMaker(20px); } h3 { @include headerMaker(15px); } }© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  8. 8. Why using SASSLESS ?• Developers that create new themes• Developers that maintain long-term applications and sites.• Developers that duplicates patterns & styles across the blog• Eventually it is the future – like jQuery is the standard for JavaScript developing, LESSSASS will be the standard for CSS developing. © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  9. 9. How is SASSLESS is working CSS preprocessor SCSS files CSS file© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  10. 10. SASS preprocessors• On Linux everything is easy: SASS: sass –watch input_dir:output_dir• On Windows: Scout © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  11. 11. SASS: Variables• Defined by $.Example:$some-var: #000000;.someClass { color: $some-var;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  12. 12. SASS: VariablesWill be compiled to:.someClass { color: #000000;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  13. 13. Variables can be anything!• Colors• Numbers• Text• List• Boolean © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  14. 14. Variables can be changed!$some-size: 15px;h1 { font-size: $some-size*2;}h6 { font-size: $some-size/2} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  15. 15. SASS functions$some-color: #fefefe;a { color: $some-color;}a:hover { color: lighten($some-color, 20%);} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  16. 16. It will be compiled to:a { color: #fefe45;}a:hover { color: #ffffaa;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  17. 17. SASS nesting.someClass a { color: #fefe45;}.someClass p { color: #000000;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  18. 18. SASS nesting.someClass { a { color: #fefe45; } p { color: #000000; }} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  19. 19. SASS Nesting and reference SCSS Sourcea { color: #fefe45; &:hover { color: #fff; }} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  20. 20. SASS Nesting and reference CSS outputa { color: #fefe45;}a:hover { color: #fff;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  21. 21. SASS mixins• The SASS “functions”• The main way to divide the CSS code to small, reusable parts.• Clusters of mixins can be used as a base layer to every projects.• In HP Software HP Live network we developed HP Experience on SASS and LESS that contains basic mixins for every basic CSS elements. © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  22. 22. SASS mixin - example@mixin my-great-mixin() { color: #000; font-size: 14px;}p { @include my-great-mixin();}a { @include my-great-mixin();} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  23. 23. SASS mixin - outputp { color: #000; font-size: 14px;}a { color: #000; font-size: 14px;} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  24. 24. SASS BIDI© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  25. 25. How to use SASSLESS on existing WordPress project?• Copy style.css & rtl.css to style.scss & rtl.scss.• Run scoutother preprocessors.• That’s it! © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  26. 26. SASSLESS on WordPress –bones base theme© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  27. 27. Directory tree• Create SCSSLESS directory and CSS directory © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  28. 28. SCSS directory• Put all the SCSS files in the SCSS directory• Make sure that there is a style.scss file. © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  29. 29. The compiled CSS file will be at the CSS directory• We need to make sure that WordPress will point the theme style to my_theme/css/style.css and not to my_theme/style.css• We do it with add_action right after “after setup theme” hook. © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  30. 30. Using after setup theme hook• to add custom CSS file At functions.php:add_action(after_setup_theme,my_theme_setup_function);function my_theme_setup_function() { add_action(wp_enqueue_scripts, my_theme_scripts_and_styles);}function my_theme_scripts_and_styles() { // register main stylesheet wp_register_style( bones-stylesheet, get_stylesheet_directory_uri() ./my_theme/css/style.css, array(), , all );} © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  31. 31. At the style.scss• Use import & media queries to import _files.scss according to device features. © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  32. 32. Thank you© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

×