2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS In Your WordPress Themes

40 %
60 %
Information about 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS...
Technology

Published on March 19, 2014

Author: glevit

Source: slideshare.net

Description

CSS controls the look and formatting of your website, allowing you to give your site a unique look. CSS Preprocessors expand this functionality, making it easier to reuse and manage your CSS code.

Both LESS and SASS follow the DRY (Don’t Repeat Yourself) principle and support reusable variables, nested selectors, and functions. Define your style only once; apply to your selectors as needed. Save time and write better, cleaner CSS.

Slides from a hands-on presentation on how to create a WordPress theme style sheet with SASS and LESS CSS. As well, creating a SASS & LESS CSS style library to reuse on future projects.

Be#er%WordPress%Style% Using&SASS&&&LESS&CSS&In&Your&WordPress&Themes& WordPress%NYC%Meetup,%3/18/2014% Presented&by:&Gabriela%Levit% Glevit@JacarandaTech.com& @JacarandaTech& hEp://JacarandaTech.com& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&&

Topics&Covered& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& ! What&is&a&CSS&Preprocessor?& ! Why&Use&a&CSS&Preprocessor?& ! Common&Preprocessors:&LESS&&& SASS& ! How&They&Work& ! Resources&

What&is&a&CSS&Preprocessor?& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& CSS&extensions&that&make&it&easier&to& reuse&and&manage&web&site&styles&

Why&use&a&CSS&Preprocessor?& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& Support&the&DRY&(Don’t&Repeat& Yourself)&Principle&

How&They&Work&T&Features& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& ! Language&extensions&such&as& variables,&nesSng,&and&mixins& ! FuncSons&for&manipulaSng&colors& and&other&values& ! Control&DirecSves&&&Expressions& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTec.com&&

Popular&Preprocessors:&SASS&&&LESS% BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& SASS:%SyntacGcally% Awesome%Style%Sheets% hEp://sassTlang.com/& LESS:%Leaner%CSS% hEp://lesscss.org/& Both are CSS compatible

How&they&work?&Variables& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& ! Colors& ! Font&Stacks& ! Other&CSS&values&for&reuse&

How&they&work?&Variables&Example& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& When&SASS&or&LESS&are&processed,&the&variable’s&values&are&placed& in&the&CSS&wherever&those&variables&are&called.&Output&is&a&valid&CSS& Stylesheet& SASS Definition Output

How&they&work?&Variables&Example& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& LESS& DefiniSon Output&

How&they&work?&NesSng% BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& You&can&nest&CSS&so&to&follow& the&same&visual&hierarchy&as& your&HTML.&Eg.&Ul,&li,&and&a&are& nested&under&nav:& ResulSng&CSS&

How&they&work?&Mixins& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& Groups%of&CSS&declaraSons&for&reuse& throughout&your&site.&I.e.&“mixTin”& properSes&from&exisSng&styles.& ! Good&for&Vendor&Prefixes& ! Slightly&Different&Syntax&in&SASS&&&LESS&

How&they&work?&Mixins&Example& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& SASS& DeclaraSon:&@mixin&direcSve&&&give&it&a&name& Use&(Calling&the&mixin):&@include&followed&by&the&name& of&the&mixin&

Resources& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& LESS% Official&Site:&hEp://lesscss.org/& SASS% Official&Site:&hEp://sassTlang.com/& Compass&Framework:&hEp://compassTstyle.org/& LESS%vs%SASS%comparison% hEps://gist.github.com/chriseppstein/674726& Preprocessors% CodeKit&(Mac&Only):&hEps://incident57.com/codekit/index.html&& LESS&&&CodeKit&Tutorial&T&Same&approach&works&for&SASS& hEp://code.tutsplus.com/tutorials/usingTcssTpreprocessorsTwithTwordpressTlessTcodekitTTwpT31524& Koala&(Mac,&Windows&&&Linux):&hEp://koalaTapp.com/& SASS&&&Koala&Tutorial:&hEp://www.wpbeginner.com/wpTtutorials/introducSonTtoTsassTforTnewTwordpressTthemeTdesigners/& Editors% Sublime&Text:&hEp://www.sublimetext.com/&

QuesSons&&&Answers& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& ???&

Thank&You!&☺& BeEer&WordPress&Style:&Using&SASS&&&LESS&CSS&&Preprocessors&I&WordPress&NYC&Meetup&I&March&18th,&2014&I&Gabriela&Levit&I&JacarandaTech.com&& ! Steve&Bruner&for&organizing&the& WordPress&NYC&meetup.& ! All&of&you&for&coming!&

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Twentytwelve WordPress SASS Child Theme - GitHub

Demo code used for the WordPress NYC Meetup Presentation on 3/18/2014: Better WordPress Style: Using SASS ... LESS Child Theme. Initial Commit. Style.css ...
Read more

Better WordPress Style: Using SASS & LESS CSS ...

... WordPress Style: Using SASS & LESS CSS Preprocessors at WordPressNYC Meetup on March 18 2014. CSS controls ... Your WordPress Theme ...
Read more

Jacaranda Technologies - lv-lv.facebook.com

... LESS CSS Preprocessors to create WordPress themes ... NYC Meetup: Better WordPress Style - Using ... use SASS & LESS CSS Preprocessors in WordPress ...
Read more

Jacaranda Technologies - Facebook

Jacaranda Technologies, ... 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS ... about how to use SASS & LESS CSS Preprocessors in WordPress ...
Read more

Better WordPress Style: Using SASS & LESS CSS Preprocessors

... Style: Using SASS & LESS CSS Preprocessors at WordPressNYC Meetup on March 18 2014. CSS ... plugin wordpress plugins wordpress themes ...
Read more

WordCamp NYC 2014 - YouTube

Ticket sales for WordCamp NYC 2014 are launched at WordPress NYC Meetup at AlleyNYC on April 15 2014.
Read more

ADUG - May 2014 - Theming in Drupal using Sass - Education

THEMING IN DRUPAL USING sass Eric Scott ... Elegant CSS Design In Drupal: LESS vs Sass ... 2014 WordPress NYC Meetup: Better WordPress Style - Using SASS ...
Read more

Twentytwelve WordPress LESS Child Theme - GitHub

... WordPress twentytwelve child theme using LESS ... using LESS. Demo code used for the WordPress NYC ... Better WordPress Style: Using SASS & LESS CSS ...
Read more