Advertisement
HTML/CSS

SASS and Compass for Web Designers: Introduction

by

Welcome to the first in a series of screencasts about SASS and Compass for web designers. We (designers) favor graphic user interfaces, and are sometimes intimidated by the command line, so let's begin by looking at three friendly applications to get you started with SASS and Compass.

At the end of this tutorial, I'll also preview SASS code nesting abilities. In future videos, we'll take a look at SASS and Compass in more depth.


Introduction


Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts on YouTube

Useful resources

Related Posts
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Web Design
    Applications and Tools
    Working With Gumby's Parallax ExtensionGumby parallax retina
    Having covered how to install the Gumby framework and how to work with its semantic grids (plus Sass and Compass), it's now time to dive into some of Gumby's extensions. The first extension we're going to play with is the parallax module.Read More…
  • Web Design
    HTML/CSS
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Web Design
    HTML/CSS
    Introducing Gumby: An Alternative CSS FrameworkGumby intro retina
    Let me introduce you to Gumby; a flexible CSS framework, currently at version 2.5. Gumby is packed with useful features, which we'll examine throughout the course of a few screencast tutorials. We'll begin by exploring its straightforward CSS variant, the UI kit, the grid, a host of other tricks, then in later videos we'll take a look at Gumby's Sass version.Read More…
  • Web Design
    Workflow
    Quick Tip: Working with SASS and BootstrapPreview
    Twitter's Bootstrap is undeniably popular - and if you're a fan of CSS preprocessors you'll love the fact that it's built on LESS. Unfortunately, if you (like me) enjoy working with SASS, there typically hasn't been anything readily available to get you started. Until now. This tutorial will explain how to combine SASS, Compass, and Twitter's Bootstrap.Read More…
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: Grids and SpritesPreview
    Let's dive deeper into building the popular Themeforest .psd design we've been working on. During this screencast we'll be looking at grids in SASS, and we'll also use one of my favorite features in Compass; automatic sprite generation.Read More…