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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Using SASS in the WordPress environment - Ran Bar Zik

  • 1,052 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,052
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
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.