CodeRecipez

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document.

Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin.

In the following example, the Mixin is included in the document with the @include directive.

mixins.scss

SassMeister Gist

CodeRecipez

When using global variables, it is important to note that as variables are redefined within the cascade, this will in turn effect the value passed into the preceding variables.

$border-radius: 5px !default;

.block-01 {
  border-radius: $border-radius;
}

.block-02 {

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

It is useful to use a nested rule’s parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

This technique will work for any pseudo class such as :after, :before, :active, and so on.

SCSS

a {
  color: red;
  text-decoration: none;
 &:hover {

CodeRecipez

CSS nesting. Whereas CSS requires that you duplicate the series of selectors for nesting, Sass allows selectors to be truly nested within one another. As selectors and rules are nested within each other, the inner rule only applies within the outer rule’s selector.

SCSS requires the use of curly-brackets {} to separate nested selectors and semi-colons ; to separate rules.

It should be noted that with SCSS tabbing is not necessary as the curly-brackets {} and semi-colons ; do all the work. But it is highly recommended for readability.

.your_new_class {
  background: orange;
  p {

CodeRecipez

Sometimes it is necessary to extend selectors within a rule. For example, you may need extend the styling of a button to designate a fail state.

In this case, you can explicitly specify where the parent selector should be inserted using the & character.

SCSS

button {
  background: gray;
  border: 1ps solid black;
 border-radius: 5px;

CodeRecipez

@media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules.

If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.

SCSS

.box {
  width: 800px;
  @media only screen and (max-width: 320px) {
 width: 97%;

CodeRecipez

Sometimes it is necessary to prefix the rule you are engineering with another selector that appears higher up in the DOM. This becomes particularly useful when working with tools like Modernizer.

In this case, you can explicitly specify where the parent selector should be inserted by placing the selector before the & character.

SCSS

.box {
  box-sizing: border-box;
  width: 800px;
 padding: 30px;

CodeRecipez

The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties.

Variables are only available within the level of nested selectors where they’re defined.

.block {
  $var: red;
  background-color: $var;
}

CodeRecipez

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML.

The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector. For example:

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

SassMeister Gist