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

20 %
80 %
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.

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

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