Chapter 8. Programmatic Logic with Sass

In the last chapter, we used Compass to significantly improve the aesthetics of our design. Granted, there's still a lot of refining to do until it's something we can be proud of.

Despite this, rather than spend our remaining time tweaking existing values in the style sheets, let's demystify some of the seemingly impenetrable aspects of Sass—logic.

When it comes to writing style sheets, I believe I'm fairly pragmatic. Therefore, I am going to tell you straight away that in most instances you could get by just fine with no knowledge of the techniques we will look at in this chapter. Therefore, if you're happy to be mediocre, skip right ahead. I don't judge.

For those still reading I salute you. It means you want to be a Sass rock star. Excellent, that's the spirit. With that in mind, take a look at the amazing Ninja skills we will be using in this chapter:

• Math calculations with Sass

• Control directives and how to use them

• Learning what interpolation is and...

Math calculations with Sass

Sass can perform all manner of mathematical conversions. Let's look at some simple examples:

Addition

Here's addition:

.addition {
    width: 20% + 80%;
}

When this is compiled, it results in this:

.addition {
  width: 100%;
} 

Subtraction

We can also do subtraction , multiplication, and division. Here's subtraction:

.subtraction {
    width: 80% - 20%;
}

Which compiles to this:

.subtraction {
  width: 60%;
}

Multiplication

When it comes to multiplication and division with Sass, there are a few considerations. Although Sass can support various units (for example em, px, %), when a unit is declared on both values it gets a little upset. This is the wrong way to do multiplication:

.multiplication {
    width: 20px * 80px;
}

Instead, you need to provide the units on just one value. For example, amend the prior example to this:

.multiplication {
    width: 20 * 80px;
}

This would compile as you might expect:

.multiplication {
  width: 1600px;
}

Division

Those same rules apply to...

Control directives and how to use them

'Control directives' sounds a bit scientific—"Hank, initiate the control directives and fire up the hydro drives". However, it's actually a lot more straightforward than that. Control directives simply mean that Sass has functionality baked-in to control when styles get generated.

Remember in Chapter 6, Advanced Media Queries with Sass and Mixins, we looked at our MQ mixin and noted it was essentially a series of if statements (if this is true do this, otherwise do something else). That is an example of a control directive in Sass; it is controlling what is generated based on certain conditions. See? Easy.

Sass has a few of these control directives so let's look at some examples. Perhaps more importantly, how we could actually make use of them. How about a way to easily switch the theme of our site?

The @if and @else if control directives

Consider this:

$color-theme: orange;

@if $color-theme == pink {
  $color-brand: pink;
} @else if $color-theme ==...

Stripping and adding units to values

When creating mixins there will be times when values need to either have their unit stripped or a unit added. Let's look at how we can do that.

Stripping the unit from a value

For example, perhaps a value returned by a function is 0%. If you want to use that as a value for a border, the % part is actually invalid CSS. Therefore we can strip the unit from a variable like this:

// A variable with a unit
$variable-with-unit: 0%;

// Strip the unit from the variable
$variable-without-unit: ($variable-with-unit * 0 + 1);

We add 0 and 1 (both without a unit) and then multiply our variable by it. This removes the unit as we are multiplying by a unit-less value.

Adding a unit to a variable value

This is how we can add a unit to a variable that represents a number:

// A variable with no unit
$variable-with-no-unit: 0;

// Add the unit to the variable
$variable-with-unit-added: ($variable-with-no-unit * 1%);

The trick is to multiply the variable by 1 unit of the type...

Writing functions in Sass

Functions are, generally speaking, most useful when creating mixins. Conceptually, the difference between the two could be described as follows; a mixin is a tool to generate a number of property and value pairs within a CSS rule. A function, on the other hand is a self contained tool to generate a value that can be used elsewhere. The result of a function can be used in a mixin or directly into the style sheet (as they can access any globally defined variables just like a mixin can).

In Chapter 5, Responsive and Flexible Grids with Sass and Compass, I mentioned sub-pixel rounding, a common problem with responsive grids. Before Susy had an isolate-grid mixin, I used a tiny grid system I'd built called 'bb-grid' to solve the sub-pixel rounding issue. It was a kind of Frankenstein of different functions, techniques, and mixins I'd taken from other grid systems to achieve my own ends.

We'll look a little at this now, simply because knowing the problems that needed to...

Using the @debug directive

The @debug directive allows us to print values set by variables or generated by functions. However, depending on what's being used to compile Sass and Compass, you may not see them. As it's impossible to cover every possible application that can compile Sass and Compass, we'll look at how this feature works on the command line.

If not using the command line to compile Sass and Compass, it may make sense to do so momentarily. If a recap is needed, take a look at Chapter 1, Getting Started with Sass and Compass, where we noted how to browse to the relevant folder for the project you are working on and then run:

compass watch

From the command line, it's always possible to view the results of the @debug directive. Here's a simple example of @debug in action. We'll add the following at the bottom of this chapter's _chapter-examples.scss partial:

@debug $theme-complement;

Now, when we save the file, we can see from the command line that Compass has compiled the CSS but it...

The @warn directive

Sass also has a @warn directive that enjoys similar functionality to @debug. For example:

@warn $theme-tint;

Unlike @debug, messages generated by @warn can be universally suppressed by adding the following to Compass's config.rb file:

sass_options = {:quiet => true}

To re-enable warnings, either comment out the line or amend it like so:

sass_options = {:quiet => false}

Summary

In this chapter, we have had a good look at some of Sass's most complex, yet powerful capabilities. We have learned how to use control directives to create limitless loops of styles. We have also learned about interpolation and how it can be used to generate the values of variables anywhere we need them. We've also looked at functions and how we can use Sass's mathematical capabilities and operators to create logic in our style sheets.

It's fair to say we've come a long way. Despite this, the examples we have covered are fairly pedestrian. It's now up to you to take these basic concepts and bend things to your will. I know you'll do us both proud.

In our final chapter, we're going to look at some of the finer techniques we can employ with Sass and Compass and do a final code review of the styles we've written thus far. We will also consider how to switch off support for different browser vendors, use the Sass interactive shell, clear the Sass cache and a whole lot more.

Your initiation...