Operations

Operations

All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for.

Number Operations

SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %). Sass math functions preserve units during arithmetic operations. This means that, just like in real life, you cannot work on numbers with incompatible units (such as adding a number with px and em) and two numbers with the same unit that are multiplied together will produce square units (10px * 10px == 100px * px). Be Aware that px * px is an invalid CSS unit and you will get an error from Sass for attempting to use invalid units in CSS.

Relational operators (<, >, <=, >=) are also supported for numbers, and equality operators (==, !=) are supported for all types.

Division and /

CSS allows / to appear in property values as a way of separating numbers. Since SassScript is an extension of the CSS property syntax, it must support this, while also allowing / to be used for division. This means that by default, if two numbers are separated by / in SassScript, then they will appear that way in the resulting CSS.

However, there are three situations where the / will be interpreted as division. These cover the vast majority of cases where division is actually used. They are:

1. If the value, or any part of it, is stored in a variable or returned by a function.
2. If the value is surrounded by parentheses, unless those parentheses are outside a list and the value is inside.
3. If the value is used as part of another arithmetic expression.

For example:

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

is compiled to:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

is compiled to:

p {
  font: 12px/30px; }

Subtraction, Negative Numbers, and -

There are a number of different things - can mean in CSS and in Sass. It can be a subtraction operator (as in 5px - 3px), the beginning of a negative number (as in -3px), a unary negation operator (as in -$var), or part of an identifier (as in font-weight). Most of the time, it’s clear which is which, but there are some tricky cases. As a general rule, you’re safest if:

• You always include spaces on both sides of - when subtracting.
• You include a space before - but not after for a negative number or a unary negation.
• You wrap a unary negation in parentheses if it’s in a space-separated list, as in 10px (-$var).

The different meanings of - take precedence in the following order:

1. A - as part of an identifier. This means that a-1 is an unquoted string with value "a-1". The only exception are units; Sass normally allows any valid identifier to be used as an identifier, but identifiers may not contain a hyphen followed by a digit. This means that 5px-3px is the same as 5px - 3px.

2. A - between two numbers with no whitespace. This indicates subtraction, so 1-2 is the same as 1 - 2.

3. A - at the beginning of a literal number. This indicates a negative number, so 1 -2 is a list containing 1 and -2.

4. A - between two numbers regardless of whitespace. This indicates subtraction, so 1 -$var are the same as 1 - $var.

5. A - before a value. This indicates the unary negation operator; that is, the operator that takes a number and returns its negative.

Color Operations

All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn. For example:

p {
  color: #010203 + #040506;
}

computes 01 + 04 = 05, 02 + 05 = 07, and 03 + 06 = 09, and is compiled to:

p {
  color: #050709; }

Often it’s more useful to use color functions than to try to use color arithmetic to achieve the same effect.

Arithmetic operations also work between numbers and colors, also piecewise. For example:

p {
  color: #010203 * 2;
}

computes 01 * 2 = 02, 02 * 2 = 04, and 03 * 2 = 06, and is compiled to:

p {
  color: #020406; }

Note that colors with an alpha channel (those created with the rgba or hsla functions) must have the same alpha value in order for color arithmetic to be done with them. The arithmetic doesn’t affect the alpha value. For example:

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

is compiled to:

p {
  color: rgba(255, 255, 0, 0.75); }

The alpha channel of a color can be adjusted using the opacify and transparentize functions. For example:

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

is compiled to:

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

IE filters require all colors include the alpha layer, and be in the strict format of #AABBCCDD. You can more easily convert the color using the ie_hex_str function. For example:

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

is compiled to:

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

String Operations

The + operation can be used to concatenate strings:

p {
  cursor: e + -resize;
}

is compiled to:

p {
  cursor: e-resize; }

Note that if a quoted string is added to an unquoted string (that is, the quoted string is to the left of the +), the result is a quoted string. Likewise, if an unquoted string is added to a quoted string (the unquoted string is to the left of the +), the result is an unquoted string. For example:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

is compiled to:

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

By default, if two values are placed next to one another, they are concatenated with a space:

p {
  margin: 3px + 4px auto;
}

is compiled to:

p {
  margin: 7px auto; }

Within a string of text, #{} style interpolation can be used to place dynamic values within the string:

p:before {
  content: "I ate #{5 + 10} pies!";
}

is compiled to:

p:before {
  content: "I ate 15 pies!"; }

Null values are treated as empty strings for string interpolation:

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

is compiled to:

p:before {
  content: "I ate  pies!"; }

Boolean Operations

SassScript supports and, or, and not operators for boolean values.

List Operations

Lists don’t support any special operations. Instead, they’re manipulated using the list functions.