Guides and Tutorials

Sass and Compass Guides & Tutorials

Tim Hettler

Using source maps with Sass 3.3

Tem Hettler shows us how to use source maps to make debugging easier with Sass 3.3 and modern browsers like Safari, Chrome, and Firefox.  Read more…

Ana Tudor

Inverse trigonometric functions with Sass

Ana Tudor kicks off her first article for The Sass Way with some crazy CSS demos and a lot of advanced math. Learn how to create asin(), acos(), and atan() functions in pure Sass.  Read more…

Sebastian Ekström

How to dynamically change text color based on a background color

Learn how to use variables and a custom function to programmatically determine contrasting text colors for different backgrounds.  Read more…

Aleksandar Goševski

Spriting with Sass and Compass

Learn how to use the image spriting features of Compass to improve page download time and drastically reduce the effort needed to assemble sprite sheets.  Read more…

Hugo Giraudel

Implementing the Bubble Sort algorithm with Sass

Until recently it was actually impossible to build a sorting function for strings and other types in Sass, but with the release of Sass 3.3 we now have have the features we need to do just that.  Read more…

Chris Michel

Share your Sass with Sache: A quick guide

Have you ever created a Sass library and wanted an easy way to share it with others? Or have you ever wondered where to look to find a Sass library to do something specific? In this article Chris Michel introduces us to Sache—an easy to use directory of Sass libraries and tools—and shows us how to easily add our own projects.  Read more…

Daniel Imms

Understanding placeholder selectors

Sass provides us with a number of helpful tools to share code between CSS rules. In this article, I’ll talk about a relatively new feature in Sass called placeholder selectors. We’ll look at how to use this feature correctly, cover some problems that may occur, and examine how it differs from other approaches.  Read more…

Hugo Giraudel

How to programmatically go from one color to another in Sass

Have you ever wanted to know how to programmatically jump from one color to another? In this article, I’ll show you how to find the color operations that are required to go from the color to another. To do this, we’ll use a couple of Sass 3.3 features, including maps and the handy call function.  Read more…

Frank S

Choosing great variable names

Sass makes it easy to reuse common values with variables. But if you’re not careful your variable names can spiral out of control. Frank S debuts his first article on The Sass Way with some helpful advice on naming your variables.  Read more…

John W. Long

Mixins for semi-transparent colors

Learn how to use Sass color functions to calculate backwards compatible colors for browsers that don’t support alpha transparency and wrap up this functionality in a couple of handy mixins.  Read more…

John W. Long

Modular CSS typography

Learn how to modularize your typography to create solid foundation for your projects. Use multiple classes and the @extend directive to create a reusable set of typographical styles.  Read more…

Hugo Giraudel

Math sequences with Sass

A fun experiment by Hugo Giraudel that demonstrates advanced usage of functions. Learn about the fibonacci sequence in Sass and more!  Read more…

John W. Long

Modular CSS naming conventions

The more you write your own stylesheets, the more you begin to value using good names in your code. Naming is by far one of the most difficult and debated activities of a developer. To many, naming is an art form.  Read more…

John W. Long

Modular CSS, an example

If avoiding nested selectors in favor of a flatter class-based CSS scares you, maybe this example will help you embrace some of the principles of modular CSS.  Read more…

John W. Long

Avoid nested selectors for more modular CSS

We’ve written before about the dangers of nesting your CSS selectors too deeply. The Inception Rule is a good one for getting you to avoid some mangled CSS selectors. But there’s actually a lot of benefit to taking this concept a couple of steps farther. What happens when you avoid nesting for almost all of your major selectors?  Read more…

John W. Long

How to structure a Sass project

One of the coolest features of crafting CSS with Sass is that you can build out a file structure that puts all your components in their right place. BUT the question is … where is the right place? Is there a standard way to structure your Sass files?  Read more…

Mason Wendell

Responsive Web Design in Sass: Using media queries in Sass 3.2

Sass 3.2 is on the way, and there are many improvements to how it handles media queries. Let’s get a jump start on all the new stuff and see how we can use media queries, which are now a first-class citizen, in Sass 3.2.  Read more…

John W. Long

A standard module definition for Sass

One part suggestion to the Sass community to adopt a standard way of structuring Sass modules and one part show and tell. John attempts to leverage his knowledge of large Sass projects to suggest a format for a Standard Module Definition for Sass.  Read more…

Mason Wendell

Responsive Web Design in Sass Part 2: Media queries in Sass

In part one we talked about how Sass can help with fluid layouts and images. Now we’ll turn our attention to the new kid in town. Media queries are the tool that takes a design from fluid to truly responsive.  Read more…

John W. Long

Interactive Sass: having fun on the terminal

Most people who use Sass are familiar to some degree with the command line. While programs like Compass.app and Scout.app are making it easier to use Sass and Compass without using the command line, hidden gems await those who are willing to do so.  Read more…

Mario Ricalde

Nested selectors: the inception rule

It’s well known that Sass is an efficient, realiable and precise tool which gives us great power and freedom to make CSS fun and less of a pain to author; however with great power comes responsibilityRead more…

Mason Wendell

Responsive Web Design in Sass Part 1: Fluid layouts and fluid images

Responsive Web Design is the new wave, right? In this two part series we’ll explore the principles, and talk about how Sass can help. In part one we dive into how Sass can help with the calculations behind fluid layouts and images.  Read more…

Adam Stacoviak

Sass control directives: @if, @for, @each and @while

Sass control directives are the cornerstone of creating libraries for reuse and distribution, and need to be among the very first items on your list of things to learn when taking your Sass skills to the next level. They provide flow and logic and give you a finite level of decision making required by mixins and functions.  Read more…

John W. Long

Leveraging Sass mixins for cleaner code

Without question, one of the most powerful and valuable features of Sass is the ability to package up existing code into reusable chunks of code called mixinsRead more…

Mason Wendell

Using pure Sass functions to make reusable logic more useful

Sass gladly lets you add calculations and logic in a way that CSS would never abide. But does that mean you should go around adding and dividing just anywhere? Find out how you can use pure Sass functions to make reusable logic more useful and your working Sass file more readable.  Read more…

Adam Stacoviak

Referencing parent selectors using the ampersand character

Referencing parent selectors by using the ampersand (&) can be a powerful tool, if used right. There are simple uses of this feature as well as some very complex uses of this feature. In this post we will cover the basic uses of the ampersand (&) as well as link you to a post by Joel Oliveira that goes much deeper on the subject.  Read more…

Adam Stacoviak

Getting started with Sass and Compass

So your friend, co-worker, web-buddy or whomever told you about Sass, Compass … or both. Great! Now what? In this beginner guide we take you through the first steps of getting started with Sass and Compass. We walk you through installation, creating a test project, compiling your first lines Sass to CSS and we even “mixin” a little Sass history.  Read more…