CodeRecipez

Mixins can take arguments SassScript values as arguments, which are given when the mixin is included and made available within the mixin as variables.

When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name. Then when including the mixin, values can be passed in in the same manner.

In the following exmaple, the Mixin is included in the document with the @include directive. This takes the name of a mixin and arguments passed into it, and includes the styles defined by that mixin into the current rule.

Variable Arguments

Sometimes it makes sense for a mixin to take an unknown number of arguments. In the following example we are creating a mixin for box shadows that takes any number of shadows as arguments. In this situation, Sass supports variable arguments, which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list.

CodeRecipez

Mixins can also specify default values for their arguments using the normal variable-setting syntax. Then when the mixin is included, if it doesn’t pass in that argument, the default value will be used instead. For example:

mixins_w_default_arguments.scss

SassMeister Gist

CodeRecipez

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

mixins_w_default_arguments.scss

SassMeister Gist

CodeRecipez

You can use SassScript variables in selectors and property names using #{} interpolation syntax.

It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.

mixins_w_expressions_in_selectors_property_names_interpolation.scss

CodeRecipez

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

SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can.

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

operations.scss

CodeRecipez

It is possible to define your own functions in sass and use them in any value or script context.

Functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within it, and you must call @return to set the return value of the function.

As you will see in the following example, creating a function that allows for custom arguments based on global values and uses Sass operations can be a powerful tool.

operations_inside_function.scss

SassMeister Gist

CodeRecipez

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.

In the following example, ff + 26, 00 + 93, and aa + ff will create the final color of ff93ff

color_operations.scss

SassMeister Gist

CodeRecipez

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

SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can.

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

In the following example you will see that operators are very handy with comparing values for control directives. SassScript supports basic control directives for including styles only under some conditions or including the same style several times with variations.

operation_w_directive.scss

CodeRecipez

The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end>.

Note the difference in the keywords through and to. $var can be any variable name, like $i; <start> and <end> are SassScript expressions that should return integers.

The @for statement sets $var to each successive number in the specified range and each time outputs the nested styles using that value of $var. For the form from <start> through <end>, the range includes the values of <start> and <end>, but the form from <start> to <end> runs up to but not including the value of <end>.

from <start> through <end>

$cols: 2;

CodeRecipez

The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end>.

The following illustrates how you can use [placeholder selectors][placeholder] to create a series of options that don't process into CSS until [extended][extend] into another selector.

$cols: 12;

@for $i from 1 through $cols {
  %grid_#{$i}of#{$cols} {
 @include grid($i, $grid_context: $cols);