Sweet Sassafras: A Designer's Dive into Sass

100 %
0 %
Information about Sweet Sassafras: A Designer's Dive into Sass
Design

Published on February 4, 2014

Author: liamdempsey

Source: slideshare.net

Description

An introduction to Sass for designers working in the WordPress environment

Sweet Sassafras: A Designer's Dive into Sass Liam Dempsey @liamdempsey Philadelphia WordPress Meetup: February 2014 @liamdempsey

C’est moi! •  •  •  •  •  Designer Designer Designer who codes Not a developer Organize the Philly ‘burbs WordPress Meetup (#burbswp) •  Run an international consultancy Philadelphia WordPress Meetup: February 2014 @liamdempsey

What We’ll Cover •  The WHAT and WHY of Sass •  Tweak local development setup for Sass (on a Mac) •  Basic elements of Sass Philadelphia WordPress Meetup: February 2014 @liamdempsey

My Goals for Tonight •  Remove the fear •  Put you on the right road •  Provide resources for moving forward •  Get you excited to get started Philadelphia WordPress Meetup: February 2014 @liamdempsey

Hat Tips Ngaire Ackerley: @ngaireackerley Tracy Levesque: @liljimmi Jeremy Pry: @jeremypry Brad, Doug and Reed: @williamsba, @zamoose and @tangofoxtrot Philadelphia WordPress Meetup: February 2014 @liamdempsey

What is Sass? •  Kind of like CSS for CSS •  Very powerful: like CSS on the sort of steroids that would frighten even Lance Armstrong Philadelphia WordPress Meetup: February 2014 @liamdempsey

Why Sass? •  Improve workflows – make it easier on yourself •  Improve efficiencies – build websites faster Philadelphia WordPress Meetup: February 2014 @liamdempsey

For a Designer: The Tools •  •  •  •  Working on a Mac Code editor: Sublime Text 2 Codekit to compile the Sass A clean, local WordPress install using MAMP Philadelphia WordPress Meetup: February 2014 @liamdempsey

READY?

Configure Sublime Text 2 Philadelphia WordPress Meetup: February 2014 @liamdempsey

Configure Sublime Text 2 Philadelphia WordPress Meetup: February 2014 @liamdempsey

Configure Sublime Text 2 STEP 1: https://sublime.wbond.net/ installation STEP 2: https://github.com/nathos/ sass-textmate-bundle Philadelphia WordPress Meetup: February 2014 @liamdempsey

Organizing Your Sass Files •  Partials – the different sub-files that are compiled into a single CSS file •  @import – the code used to deter the order in which the partials are compiled in the output CSS Philadelphia WordPress Meetup: February 2014 @liamdempsey

The Partials Philadelphia WordPress Meetup: February 2014 @liamdempsey

The @import Philadelphia WordPress Meetup: February 2014 @liamdempsey

The @import Philadelphia WordPress Meetup: February 2014 @liamdempsey

The Partials: _footer.scss Philadelphia WordPress Meetup: February 2014 @liamdempsey

Grab a Normalize.scss •  Preserves useful defaults •  Normalizes styles for a wide range of elements. •  Corrects bugs + common browser inconsistencies •  Code online at: https://github.com/ kristerkari/normalize.scss Philadelphia WordPress Meetup: February 2014 @liamdempsey

Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey

Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey

Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey

Let’s Get Sassing!

Variables Philadelphia WordPress Meetup: February 2014 @liamdempsey

Nesting Philadelphia WordPress Meetup: February 2014 @liamdempsey

Extend: with @mixin Philadelphia WordPress Meetup: February 2014 @liamdempsey

Extend: @extend Philadelphia WordPress Meetup: February 2014 @liamdempsey

Operators Philadelphia WordPress Meetup: February 2014 @liamdempsey

Mixins + Placeholders •  A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. •  Functions that drop CSS content instead of returning a value. Philadelphia WordPress Meetup: February 2014 @liamdempsey

Mixins + Placeholders Philadelphia WordPress Meetup: February 2014 @liamdempsey

Mixins + Placeholders •  A placeholder is like a @mixin except that it does not allow for variables •  Placeholder selectors look like class and id selectors, except the # or . is replaced by %. Philadelphia WordPress Meetup: February 2014 @liamdempsey

Questions?

Sass Resources http://sass-lang.com/ http://susy.oddbird.net/ https://speakerdeck.com/danajanssen/using-sass-to-code-betterwordpress-templates http://talks.guyroutledge.co.uk/sass-compass/slides/#/1 http://sonspring.com/journal/sass-for-designers http://www.developerdrive.com/2012/07/introduction-to-sass/ http://www.creativebloq.com/web-design/create-flexible-grids-usingsass-9134524 http://lukewhitehouse.co.uk/compiling-sass-for-wordpress http://peteschuster.com/2013/02/beyond-oocss-with-sass/ http://css-tricks.com/compass-compiling-and-wordpress-themes/ http://thesassway.com/beginner http://www.thetracyl.com/start-using-sass/ Philadelphia WordPress Meetup: February 2014 @liamdempsey

Thanks! Work: lbdesign.tv Blog: liamdempsey.com Quirky: chickenmonkeydog.com @liamdempsey liam@lbdesign.tv Philadelphia WordPress Meetup: February 2014 @liamdempsey

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Sweet Sassafras: A Designer's Dive into SASS in ...

Join for free and connect with our local tech scene. Stay on top of the latest companies and upcoming events with our weekly newsletter, and be counted ...
Read more

All Photo Albums - Philadelphia WordPress Meetup Group ...

Sweet Sassafras: A Designer's­ Dive into SASS 6 photos Activity on Feb 5, 2014 Advanced Custom Fields From a Designer's­ Perspective 3 photos
Read more

The Ultimate Guide to Web Design Vol 3 - 2014 UK

The Ultimate Guide to Web ... into CSS and Sass, ... We love Git’s effortless branching. let’s dive in. The ultimate guide to web design 11 Above ...
Read more

Loot.co.za: Sitemap

9780756626273 0756626277 Go Scuba Dive, ... Guide to GAAS 2001 - Covering All SASs, SSAEs ... - Integrate Web 2.0 Services Into Your ...
Read more

wagmag July 2011 by Wag Magazine - issuu

... wagmag July 2011, Author: Wag ... the brilliant but damaged designer’s “Jellyfish” Ensemble ... always accompanied by sweet ...
Read more

1000+ images about RP on Pinterest | String Art, Neon and ...

Explore Kristin Johnson's board "RP" on Pinterest, the world's catalog of ideas. | See more about String Art, Neon and Neon Party.
Read more

Speed Chat Dictionary - Pirates Online Wiki - Wikia

... designed designer designer's designers designing ... diva diva's divas dive dived diver diver's ... intimidating into intolerant ...
Read more

Cpgiftreview summer 2015 by Cliff Price and Company (page ...

Cpgiftreview summer 2015 | Issuu is a digital publishing platform that makes it simple to publish magazines, catalogs, newspapers, books, and more online.
Read more