CodeRecipez

Sometimes you’ll write styles for a class that you only ever want to @extend, and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to @extend if they need and ignore if they don’t.

If you use normal classes for this, you end up creating a lot of extra CSS when the stylesheets are generated, and run the risk of colliding with other classes that are being used in the HTML. That’s why Sass supports “placeholder selectors” (for example, %foo).

Placeholder selectors look like class and id selectors, except the # or . is replaced by %. They can be used anywhere a class or id could, and on their own they prevent rulesets from being rendered to CSS.

selector_inheritance_w_silent_extend.scss

For more information and examples as to how the @extend directive works, be sure to read Sass Extends: be aware of the loop.

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

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

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

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);

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

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

Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.

By themselves, lists don't do much. This example illustrates using a list with the [@each rule][each-rule] to create a series of CSS rules based on a list of vendor prefixes.

[Read more on lists][read-more] [read-more]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists [each-rule]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

$prefix-defaults: -moz- -webkit- -o- -ms- "" !default;