• The Fig Leaf Blog

The Fig Leaf Blog

TRAINING: Fast Track to Syntactically Awesome Stylesheets (Mar 1, 2017)

Posted by Bret Peters on Feb 13, 2017 8:32:52 AM
Bret Peters

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site. This one-day course covers Sass and Compass (a CSS authoring framework for Sass) development essentials. Whether you're developing a static site, a dynamic site with a CMS (Drupal), or building an advanced web-based application (Sencha), you'll find that Sass is an indispensable tool for taming and optimizing your CSS.

Course Prerequisites

To gain the most from this class, you should already have:

  • A basic understanding of CSS syntax
  • Familiariaty with basic programming concepts such as defining variables and using functions

Course Objectives

During this course you will refactor a very long and difficult to maintain CSS file into a set of .scss (Sassy CSS) files. You'll learn how to restructure your CSS for optimal maintainabilty and produce minified production builds. You'll also learn how to use advanced CSS tricks such as base-64 encoding of images to significantly increase the performance of your web sites and web applications.

Course Outline

UNIT 1: INTRODUCING THE COURSE

UNIT 2: INTRODUCING SASS

  • Introducing Compass and Sass
  • Debugging CSS
  • Working with Variables
  • Using Partials to Organize your Stylesheet

UNIT 3: WORKING WITH SASS

  • Nesting Rules
  • Creating Responsive Themes with @media Directives
  • Defining Inheritance with @extend
  • Defining and Invoking Mixins
  • Using Control Directives
  • Defining Sass Functions

UNIT 4: USING COMPASS FOR COMPATIBILITY AND PERFORMANCE

  • Configuring Browser Support
  • Using Compass to Support CSS3 Features
  • Using Compass for Typography
  • Embedding Images in your Stylesheet
  • Using Sprites to Improve Performance

Register for Training

Topics: Syntactically Awesome Stylesheets

"We've Got You Covered"

Sign up to receive updates on new events, new classes, discounted promotions, monthly schedules, and more.

Posts by Topic

see all