Suche senden
Hochladen
Using SASS in the WordPress environment - Ran Bar Zik
•
1 gefällt mir
•
1,574 views
Miriam Schwab
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 32
Empfohlen
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
ID01 Week 3
ID01 Week 3
mkontopo
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
Documentation Insight技术架构与开发历程
Documentation Insight技术架构与开发历程
jeffz
电子商务网站前端开放实战
电子商务网站前端开放实战
macji
D2-超级旺铺
D2-超级旺铺
supershop
Introduction to Web Standards
Introduction to Web Standards
Jussi Pohjolainen
Empfohlen
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
ID01 Week 3
ID01 Week 3
mkontopo
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
Documentation Insight技术架构与开发历程
Documentation Insight技术架构与开发历程
jeffz
电子商务网站前端开放实战
电子商务网站前端开放实战
macji
D2-超级旺铺
D2-超级旺铺
supershop
Introduction to Web Standards
Introduction to Web Standards
Jussi Pohjolainen
Grok Drupal (7) Theming
Grok Drupal (7) Theming
PINGV
Web Development
Web Development
Harshdeep Singh
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
Suzanne Dergacheva
WordPress Theme Development
WordPress Theme Development
Santosh Kunwar
Prototyping interactions
Prototyping interactions
selwynjacob90
Php
Php
zalatarunk
新 · 交互
新 · 交互
Sofish Lin
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Acquia
The Future Of CSS
The Future Of CSS
Andy Budd
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Mykhailo Kotsur
Drupal - Introduction to Drupal and Web Content Management
Drupal - Introduction to Drupal and Web Content Management
Vibrant Technologies & Computers
Drupal 7 Theme System
Drupal 7 Theme System
Peter Arato
SMACSS Workshop
SMACSS Workshop
Tim Hettler
File formats
File formats
Kopi Maheswaran
Css Founder.com | Cssfounder Net
Css Founder.com | Cssfounder Net
Css Founder
wordpress
wordpress
vedvratsingh
The web context
The web context
Dan Phiffer
Php reports sumit
Php reports sumit
Sumit Biswas
CSS3
CSS3
Chathuranga Jayanath
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
bentleyhoke
Less css
Less css
Bill Chea
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
Weitere ähnliche Inhalte
Was ist angesagt?
Grok Drupal (7) Theming
Grok Drupal (7) Theming
PINGV
Web Development
Web Development
Harshdeep Singh
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
Suzanne Dergacheva
WordPress Theme Development
WordPress Theme Development
Santosh Kunwar
Prototyping interactions
Prototyping interactions
selwynjacob90
Php
Php
zalatarunk
新 · 交互
新 · 交互
Sofish Lin
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Acquia
The Future Of CSS
The Future Of CSS
Andy Budd
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Mykhailo Kotsur
Drupal - Introduction to Drupal and Web Content Management
Drupal - Introduction to Drupal and Web Content Management
Vibrant Technologies & Computers
Drupal 7 Theme System
Drupal 7 Theme System
Peter Arato
SMACSS Workshop
SMACSS Workshop
Tim Hettler
File formats
File formats
Kopi Maheswaran
Css Founder.com | Cssfounder Net
Css Founder.com | Cssfounder Net
Css Founder
wordpress
wordpress
vedvratsingh
The web context
The web context
Dan Phiffer
Php reports sumit
Php reports sumit
Sumit Biswas
Was ist angesagt?
(18)
Grok Drupal (7) Theming
Grok Drupal (7) Theming
Web Development
Web Development
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
WordPress Theme Development
WordPress Theme Development
Prototyping interactions
Prototyping interactions
Php
Php
新 · 交互
新 · 交互
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
The Future Of CSS
The Future Of CSS
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Drupal - Introduction to Drupal and Web Content Management
Drupal - Introduction to Drupal and Web Content Management
Drupal 7 Theme System
Drupal 7 Theme System
SMACSS Workshop
SMACSS Workshop
File formats
File formats
Css Founder.com | Cssfounder Net
Css Founder.com | Cssfounder Net
wordpress
wordpress
The web context
The web context
Php reports sumit
Php reports sumit
Ähnlich wie Using SASS in the WordPress environment - Ran Bar Zik
CSS3
CSS3
Chathuranga Jayanath
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
bentleyhoke
Less css
Less css
Bill Chea
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
CSS Extenders
CSS Extenders
Idan Gazit
Why less?
Why less?
Bunlong Van
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
LESS CSS
LESS CSS
Mathi Rajalingam
Understanding sass
Understanding sass
Mario Hernandez
Sass and Compass - Getting Started
Sass and Compass - Getting Started
edgincvg
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
Steve Krueger
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
Introduction to CSS Preprocessors
Introduction to CSS Preprocessors
Blake Newman
SASS Preprocessor
SASS Preprocessor
Webkul Software Pvt. Ltd.
Team styles
Team styles
nathanscott
AAVN_Presentation_SASS.pptx
AAVN_Presentation_SASS.pptx
Hoàng Nguyễn Mạnh
Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01
Anam Hossain
CSS preprocessor: why and how
CSS preprocessor: why and how
mirahman
LESS is More
LESS is More
jsmith92
Ähnlich wie Using SASS in the WordPress environment - Ran Bar Zik
(20)
CSS3
CSS3
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Less css
Less css
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
CSS Extenders
CSS Extenders
Why less?
Why less?
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
LESS CSS
LESS CSS
Understanding sass
Understanding sass
Sass and Compass - Getting Started
Sass and Compass - Getting Started
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Introduction to CSS Preprocessors
Introduction to CSS Preprocessors
SASS Preprocessor
SASS Preprocessor
Team styles
Team styles
AAVN_Presentation_SASS.pptx
AAVN_Presentation_SASS.pptx
Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01
CSS preprocessor: why and how
CSS preprocessor: why and how
LESS is More
LESS is More
Mehr von Miriam Schwab
Making your content fly with onsite SEO
Making your content fly with onsite SEO
Miriam Schwab
Content Security Policies: A whole new way of securing your website that no o...
Content Security Policies: A whole new way of securing your website that no o...
Miriam Schwab
Digitizing your business
Digitizing your business
Miriam Schwab
Managing multitudes of media
Managing multitudes of media
Miriam Schwab
Mobile SEO at SMX Israel 2014
Mobile SEO at SMX Israel 2014
Miriam Schwab
WordPress for Startups
WordPress for Startups
Miriam Schwab
How to add semantic data to your WP site in 20 minutes or less! WordSesh 2013
How to add semantic data to your WP site in 20 minutes or less! WordSesh 2013
Miriam Schwab
Getting an online marketing job in Jerusalem - is that even possible?
Getting an online marketing job in Jerusalem - is that even possible?
Miriam Schwab
Responsive Design for WordPress
Responsive Design for WordPress
Miriam Schwab
WordPress site planning, WordCamp Jerusalem 2013
WordPress site planning, WordCamp Jerusalem 2013
Miriam Schwab
The Power of Your Story - Kimanzi Constable
The Power of Your Story - Kimanzi Constable
Miriam Schwab
מצגת יעל הרמן מוורדקמפ ירושלים 2013
מצגת יעל הרמן מוורדקמפ ירושלים 2013
Miriam Schwab
The Business of WordPress - WordCamp Jerusalem 2013
The Business of WordPress - WordCamp Jerusalem 2013
Miriam Schwab
היכרות עם וורדפרס ועוד חן כהן
היכרות עם וורדפרס ועוד חן כהן
Miriam Schwab
מ-antispambot ועד zeroise – עשר פונקציות וורדפרס שאתם כנראה לא מכירים
מ-antispambot ועד zeroise – עשר פונקציות וורדפרס שאתם כנראה לא מכירים
Miriam Schwab
Small but mighty - Google+, Instagram, Pinterest
Small but mighty - Google+, Instagram, Pinterest
Miriam Schwab
Measuring Twitter: SMX Israel 2013
Measuring Twitter: SMX Israel 2013
Miriam Schwab
Google Analytics for PPC: SMX Israel 2013
Google Analytics for PPC: SMX Israel 2013
Miriam Schwab
Introduction to the semantic web: SMX Israel 2013
Introduction to the semantic web: SMX Israel 2013
Miriam Schwab
Blogging with WordPress.com for beginners, part 1/3, by Deena Levenstein IN H...
Blogging with WordPress.com for beginners, part 1/3, by Deena Levenstein IN H...
Miriam Schwab
Mehr von Miriam Schwab
(20)
Making your content fly with onsite SEO
Making your content fly with onsite SEO
Content Security Policies: A whole new way of securing your website that no o...
Content Security Policies: A whole new way of securing your website that no o...
Digitizing your business
Digitizing your business
Managing multitudes of media
Managing multitudes of media
Mobile SEO at SMX Israel 2014
Mobile SEO at SMX Israel 2014
WordPress for Startups
WordPress for Startups
How to add semantic data to your WP site in 20 minutes or less! WordSesh 2013
How to add semantic data to your WP site in 20 minutes or less! WordSesh 2013
Getting an online marketing job in Jerusalem - is that even possible?
Getting an online marketing job in Jerusalem - is that even possible?
Responsive Design for WordPress
Responsive Design for WordPress
WordPress site planning, WordCamp Jerusalem 2013
WordPress site planning, WordCamp Jerusalem 2013
The Power of Your Story - Kimanzi Constable
The Power of Your Story - Kimanzi Constable
מצגת יעל הרמן מוורדקמפ ירושלים 2013
מצגת יעל הרמן מוורדקמפ ירושלים 2013
The Business of WordPress - WordCamp Jerusalem 2013
The Business of WordPress - WordCamp Jerusalem 2013
היכרות עם וורדפרס ועוד חן כהן
היכרות עם וורדפרס ועוד חן כהן
מ-antispambot ועד zeroise – עשר פונקציות וורדפרס שאתם כנראה לא מכירים
מ-antispambot ועד zeroise – עשר פונקציות וורדפרס שאתם כנראה לא מכירים
Small but mighty - Google+, Instagram, Pinterest
Small but mighty - Google+, Instagram, Pinterest
Measuring Twitter: SMX Israel 2013
Measuring Twitter: SMX Israel 2013
Google Analytics for PPC: SMX Israel 2013
Google Analytics for PPC: SMX Israel 2013
Introduction to the semantic web: SMX Israel 2013
Introduction to the semantic web: SMX Israel 2013
Blogging with WordPress.com for beginners, part 1/3, by Deena Levenstein IN H...
Blogging with WordPress.com for beginners, part 1/3, by Deena Levenstein IN H...
Kürzlich hochgeladen
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Zilliz
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Fwdays
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Precisely
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
Kürzlich hochgeladen
(20)
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
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.