Code Fellows and Seattle Sass Meetup bring you Sass 101 - A Newb's Workshop

Is Sass somewhat of a mystery to you? How does it work? Why do some say that it is better then CSS? What's the difference between Sass and SCSS anyway? How can I integrate it into my design/development process? What are the benefits? What problems does it solve? Do I have to be a Rails developer to use Sass? Etc ...

"Sass 101 - a newb's workshop" is designed to answer these questions and more. We'll quickly progress into the various instillation processes, basic use of the language, processing your first stylesheet and even have an introduction to Compass - the powerful Sass framework. By the end of this course you will:

  1. fully understand what a CSS pre-processor is;
  2. be able to install and process Sass for your projects;
  3. have mastered Sass' basic concepts;
  4. and be introduced to the Compass framework.

Guaranteed, after attending "Sass 101 - a news's guide", you will master the basics of Sass, even if you've never used a CSS pre-processor!

Why Learn Sass?

Sass is the fastest growing language of the CSS Pre-Processors. The scale in which web sites and apps are growing, vanilla CSS just doesn't have the tools to support it. The speed in which developers need to get projects up and running, understanding and leveraging these powerful bootstrap frameworks is essential to today's UI developer.

Prerequisites

It is assumed that any workshop attendee would have reasonable knowledge of how to use a computer. It is also assumed that an attendee would have at least common understanding of HTML and CSS.

Laptops with WiFi connection will be required for the workshop.

If Sass is not installed prior to the workshop, there will be a small portion early on dedicated to getting Sass installed.

Accommodations will be considered for all users of Macs, Windows and Linux.

The use of Rails is not required.

Special accommodations

For those attendees that need additional help with getting Sass installed on their computer, additional material can be provided ahead of time. If needed, attendees may request help time before the workshop starts.

Online tools to follow along

In the workshop, attendees are encouraged to install Sass on their machine, but not required. The workshop will make heavy use of SassMeister.com, an online Sass sandbox.

About the instructor

The "Sass 101 - a newb's guide" workshop is being lead by Dale Sande, founder and orginizer of the Seattle Sass meetup. Having contributed articles on Sass to such publications as CSS Weekly and Unmatched Style, Dale is helping to lead the charge on using CSS Pre-Processors to write better, maintainable and scaleable CSS through Sass.

Dale can be found tweeting about Sass at either @anotheruiguy or @SassMeetup, or talking about Sass at SassCast.

Workshop course

  1. A newb's intro to Sass

    1. What is a CSS pre-processor?
    2. What's the difference between Sass and SCSS?
    3. Sass is a Ruby Gem. What?
  2. Installing Sass

    1. Sass from the Command Line
    2. Scout
    3. Compass.app
    4. CodeKit
    5. LiveReload
  3. Sass 101 - core features

    1. Sass comments: how to write and make useful
    2. Nesting your selectors and properties
    3. Nesting pseudo classes
    4. Redefining the parent selector w/nested selectors
    5. Using variables
    6. Selector inheritance w/@extend
    7. Selector inheritance w/silent placeholder classes
    8. Intro to Mixins
    9. Mixins w/arguments
    10. Mixins with default variables
    11. Mixins with variable arguments
    12. Mixins w/expressions in Selectors and Property Names (interpolation)
    13. @media: Sass + RWD
    14. Trouble shooting and error reporting
    15. Chrome inspector w/Sass
  4. Sass 101 - file management

    1. Working with partials
    2. Partials w/default variable values
    3. Establishing a Sass manifest file
    4. Working with a config.sass file
  5. Sass 101 - intro to scripting

    1. Introduction to Sass math
    2. Introduction to Sass number operations
    3. Introduction to Sass color functions
    4. Introduction to the custom '@function' feature
  6. Sass 101 - intro to control directives

    1. Repeating Styles for a Range of Numbers (@for)
    2. Repeating Styles for a List of Values (@each)
    3. Conditional Styling (@if / @else)
  7. Sass 101 - intro to Compass

    1. What is Compass?
    2. Installing Compass w/CLI
    3. Creating your first Compass project
    4. Installing a Compass Extension into your project