Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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...