Your SlideShare is downloading. ×
Using SASS in the WordPress environment - Ran Bar Zik
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using SASS in the WordPress environment - Ran Bar Zik

1,095
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WordPress with SASSLESS© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. SASS BIDI© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  • 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. 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. 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. 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. 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. 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. 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. Thank you© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.