advertisement

An Intro to Sass: This Designer's Dive into Sass

33 %
67 %
advertisement
Information about An Intro to Sass: This Designer's Dive into Sass
Design

Published on March 11, 2014

Author: liamdempsey

Source: slideshare.net

Description

An updated version of the presentation that I delivered to the Philadelphia WordPress Meetup. This particular Sass presentation was delivered to the Philly 'burbs WordPress Meetup.
advertisement

An Intro to Sass: This Designer's Dive into Sass Liam Dempsey @liamdempsey Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

C’est moi! •  Designer who codes •  Not a developer •  Run an international consultancy @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

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

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

Hat Tips Ngaire Ackerley: @ngaireackerley Tracy Levesque: @liljimmi Jeremy Pry: @jpry Owen Winkler: @ringmaster (for giving me a ride to the meetup) @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

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

Why Sass? •  Improve workflows – make it easier on yourself •  Improve efficiencies – build websites faster @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

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 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

READY?

Configure Sublime Text 2 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

Configure Sublime Text 2 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

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

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

The Partials @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

The @import @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

The @import @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

The Partials: _footer.scss @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

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 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

Organizing Codekit @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

Organizing Codekit @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

Organizing Codekit @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

Let’s Get Sassing!

Variables @liamdempsey Philly ‘burbs WordPress Meetup: March 2014

Nesting Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

Extend: with @mixin Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

Extend: @extend Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

Operators Philly ‘burbs WordPress Meetup: March 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. Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

Mixins + Placeholders Philly ‘burbs WordPress Meetup: March 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 %. Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

Questions?

Sass Resources http://sass-lang.com/ http://susy.oddbird.net/ https://speakerdeck.com/danajanssen/using-sass-to-code-better- wordpress-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-using- sass-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/ Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

Work: lbdesign.tv Blog: liamdempsey.com Quirky: chickenmonkeydog.com @liamdempsey liam@lbdesign.tv Thanks! Philly ‘burbs WordPress Meetup: March 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

An Intro to Sass & Leather | Sass & Leather

An Intro to Sass & Leather. ... I personally love high end designer fashion, ... And the Sass part ...
Read more

Sassy CSS: An Intro to Sass | Tech Class | General Assembly

Sassy CSS: An Intro to Sass. Coding; ... Geared toward front-end developers and designers ... Sign up for our weekly emails to learn how to break into or ...
Read more

Sass: Sass Basics

Before you can use Sass, ... The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass ...
Read more

Why Sass? · An A List Apart Article

And in this exclusive excerpt from Chapter 1 of Sass For Web Designers, ... dive in without fear. I don’t want Sass to ... how Sass can fit into your ...
Read more

Sassy CSS: An Intro to Sass Boston | General Assembly

Sassy CSS: An Intro to Sass Boston. Coding; Boston campuses. GA Boston 51 Melcher Street ...
Read more

Basic Introduction to: SASS - (Syntactically Awesome ...

Basic Introduction to: SASS - ... Intro. These days, websites ... While writing SASS code we can wrap as many selectors as we want into one module, ...
Read more

How To Use Sass With WordPress – A Step By Step Guide ...

... I think once they dive in and really understand ... when Elegant Themes would release their SASS files ... SASS into pre-made ...
Read more

A Complete Beginner’s Guide to learning Sass in a weekend ...

A Complete Beginner’s Guide to learning ... Are current Intro to Sass tutorials promising help for ... if you take a weekend to dig into Sass, ...
Read more