Skip to content

Latest commit

 

History

History
60 lines (37 loc) · 2.99 KB

README.md

File metadata and controls

60 lines (37 loc) · 2.99 KB
Raw

GDI - Intro to Sass

Slides and materials are hosted at http://gdiseattle.github.io/gdi-sass/.

Course description

Looking to take your CSS to the next level? Wondering how to improve your workflow and avoid repeating yourself in CSS? Come learn the basics of Sass (Syntactically Awesome Stylesheets) and unlock the magic of CSS preprocessing. You won't want go to back to vanilla CSS!

The course is meant to be taught in 2 two-hour sections. Each of the slides and practice files are customizable according to the needs of a given class or audience.

Cost: $40.00 for both classes

Dates: This two class course runs on two Tuesdays:

Class 1 - Intro to Sass: Tuesday, August 18, 6:00 - 8:00 pm Class 2 - Applying Sass to Your Workflow: Tuesday, August 25, 6:00 - 8:00 pm

Location:

TUNE Kitchen
2125 Western Avenue, Seattle, WA

A limited number of scholarships are available for those with a financial hardship. To apply, contact us at [email protected].

Prerequisites:

This class is recommended for students who have taken our Intro and Intermediate HTML & CSS classes or have a similar level of experience.

Tech requirements:

At this time, you will need to provide your own laptop - PC or Mac - to participate in the course.

Topics covered:

Class 1

Part 1: Introduction to Sass. What is it? Why does it matter?

We look at how Sass makes writing CSS easier, and set up our environment. You will install Ruby and Sass, learn basics of the command line and get your files set up to compile Sass into CSS.

Part 2: Building Blocks of Sass.

You'll learn basic Sass concepts including variables, nesting, color functions and mix-ins. Students will create a basic Sass stylesheet with color and font variables, nested styles, and simple mix-ins for reusing CSS. You'll learn the difference between hidden comments and visible comments, and see the output of your Sass experiments.

Class 2

Part 1: Advanced Mix-Ins

You'll learn how to create advanced mix-ins for CSS3 features like gradients, sprite images, and drop shadows. We'll redesign the front end of our site using Sass to style it with the latest CSS3 features.

Part 2: Custom Sass Functions

You will write your own functions to extend your Sass, using programming concepts like if/else statements, for loops, and lists to power your CSS.

Part 3: Sass Tips & Tricks

Sass extends CSS3, and there are also tools that extend Sass! We'll look at the following Sass helpers:

  • Compass, which gives you open source mix-ins and functions to use in your own code
  • CodeKit & LiveReload, applications for compiling Sass for your projects (without the command line)
  • Sass Sleuth, for debugging code in the browser inspector
  • Codepen.io for sharing code a la JSFiddle