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

Using SASS in the WordPress environment - Ran Bar Zik

on

  • 1,282 views

 

Statistics

Views

Total Views
1,282
Views on SlideShare
693
Embed Views
589

Actions

Likes
1
Downloads
0
Comments
0

6 Embeds 589

http://2013.jerusalem.wordcamp.org 357
http://www.internet-israel.com 213
http://illuminea.com 15
https://internet-israel.com 2
http://cloud.feedly.com 1
https://www.google.co.il 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using SASS in the WordPress environment - Ran Bar Zik Using SASS in the WordPress environment - Ran Bar Zik Presentation Transcript

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