Beginning css preprocessors

Listing 3-32.  Example of a Compound Mixin

@mixin success {

  @include notification;

  @include successTheme;

}

Mixin arguments are written in variable format, separated by commas if more than one argument is 

there. These arguments can have default values that will be used if no value is provided as an argument.

Listing 3-33.  Passing a Block of Code as an Argument to a Mixin

@mixin clearFix {

  &:after {

    @content;

  }

}

 

.btn {

  display: inline-block;

  @include clearFix {

    clear:both;

  }

}

Listing 3-34.  Output of Listing 

3-33

.btn {

  display: inline-block;

}

 

.btn:after {

  clear: both;

}

---

Chapter 3 

■

 advanCed SaSS

48

Mixins versus Classes

Mixins make reusing styles in a stylesheet very easy. Any piece of style code that’s repeated is a good 

candidate for a mixin. For example, a group of properties that make sense to set together like border radius, 

background gradient, and so on, would be a good mixin.

Mixins are very similar to CSS classes. Both let you store chunks of style. The most important difference 

between these two is that classes are meant to be used in your HTML, whereas mixins are used to create 

reusable chunks to use within stylesheets.

Hence, the classes should have a meaningful name that properly identifies the element. Mixins names 

should be related to the functionality they provide.

Mixins with CSS Selectors

Mixins can contain CSS selectors in addition to properties. This is demonstrated in Listing 

3-35

.