Advertisement
HTML/CSS

SASS and Compass for Web Designers: Building a Theme

by

We're going to continue our look at SASS and Compass, this time preparing ourselves for a complete website template build. During the coming screencasts we'll use a popular Themeforest .psd design, translating it into an HTML/CSS project with our new found SASS and Compass skills. There's lots to do, so let's get going!


Plan of Action

To begin with we'll look at yet another software application to compile our SASS and Compass files, and we'll look at what we're going to build in this series.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Variables, Mixins and Functions

This is a short introduction to variables, mixins and functions.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Setting up the Project

Now let's set up the project, import some dependencies, and talk about partials and default variables. We're all set to start writing SCSS.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Useful resources

Related Posts
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    CMS
    Understanding Tumblr Variable TransformationsTumblr 26 retina
    In this video we're going to introduce a concept called Variable Transformation. This is something which Tumblr offers, allowing us to alter the data returned from any given variable. We'll be using Tumblr's {CustomCSS} variable to demonstrate how it works.Read More…
  • Web Design
    CMS
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!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
    Applications and Tools
    Building Semantic Grids With GumbyGumby semantic retina
    In this tutorial we're going to build ourselves clean, readable markup with the help of Gumby's semantic grid structure. We'll continue working with the example we started in the previous lesson, getting rid of as much unnecessary mess from our code as possible, plus we'll be using Sass to speed things up.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…