Contenu connexe
Similaire à Using SASS in the WordPress environment - Ran Bar Zik
Similaire à Using SASS in the WordPress environment - Ran Bar Zik (20)
Plus de Miriam Schwab (20)
Using SASS in the WordPress environment - Ran Bar Zik
- 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. Nesting
a {
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: Variables
Will 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 Source
a {
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 output
a {
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 - output
p {
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.