Using SASS in the WordPress environment - Ran Bar Zik

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


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;
}


Mixins in SASS
@mixin RoundBorders ($radius: 5px) {
border-radius: $radius;
}

p {
@include RoundBorders ();
}

a {
}

strong {
}

.someClass {
}

Nesting
a {
text-deocration: none;
&:hover {
text-decoration:underline;
}
}


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-size: 20px;
color: #fefecc;
}
h2:hover {
}

h3 {
font-size: 15px;
color: #fefecc;
}
h3:hover {
}}

SASS code
@mixin headerMaker ($size: 10px) {
$header-color: #fefecc;
font-size: $size;
color: $header-color;
&:hover {
}
}

h1 {
@include headerMaker(30px);
}

h2 {
}

h3 {
}
}

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.

How is SASSLESS is working

CSS preprocessor
SCSS files CSS file


SASS preprocessors
• On Linux everything is easy:
SASS: sass –watch input_dir:output_dir
• On Windows:
Scout


SASS: Variables
• Defined by $.
Example:
$some-var: #000000;
.someClass {
color: $some-var;
}

SASS: Variables
Will be compiled to:
.someClass {
color: #000000;
}


Variables can be anything!
• Colors
• Numbers
• Text
• List
• Boolean


Variables can be changed!
$some-size: 15px;

h1 {
font-size: $some-size*2;
}
h6 {
font-size: $some-size/2
}

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;
}

SASS nesting
.someClass a {
color: #fefe45;
}
.someClass p {
color: #000000;
}


SASS nesting
.someClass {
a {
color: #fefe45;
}
p {
color: #000000;
}
}


SASS Nesting and reference
SCSS Source
a {
color: #fefe45;
&:hover {
color: #fff;
}
}


SASS Nesting and reference
CSS output
a {
color: #fefe45;
}
a:hover {
color: #fff;
}


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.

SASS mixin - example
@mixin my-great-mixin() {
color: #000;
font-size: 14px;
}
p {
@include my-great-mixin();
}
a {
@include my-great-mixin();
}


SASS mixin - output
p {
color: #000;
font-size: 14px;
}

a {
color: #000;
font-size: 14px;
}


SASS BIDI


How to use SASSLESS on
existing WordPress project?
• Copy style.css & rtl.css to style.scss & rtl.scss.
• Run scoutother preprocessors.
• That’s it!


SASSLESS on WordPress –
bones base theme


Directory tree
• Create SCSSLESS directory and CSS directory


SCSS directory
• Put all the SCSS files in the SCSS directory
• Make sure that there is a style.scss file.


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.

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' );
}


At the style.scss
• Use import & media queries to import
_files.scss according to device features.


Thank you


Using SASS in the WordPress environment - Ran Bar Zik

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Using SASS in the WordPress environment - Ran Bar Zik

Similar a Using SASS in the WordPress environment - Ran Bar Zik (20)

Más de Miriam Schwab

Más de Miriam Schwab (20)

Último

Último (20)

Using SASS in the WordPress environment - Ran Bar Zik