So far we have covered detailed information about variables. One of the major consumers of variables are mixins. Let's a quick introductory but detailed view of mixins.
While engineering your project you will begin to discover a number of repeated CSS patterns in your code. This is where mixins become very handy. While variables allow you to re-use values, mixins allow you to re-use blocks of CSS and Sass. Mixins can be an assortment of CSS rules and Sass logic that can be used repeated throughout the site. It is a complex and dynamic set of styles, similar to variables, that will allow for a single point of change which will reverberate through all the inclusion points. As the repeated patterns become apparent to you, writing the mixin can become self evident. While some of these patterns may be a direct 1:1 copy of the code, for example:
@mixin hand-cursor {
cursor: hand;
cursor: pointer;
}
The above mixin is an example of a direct mixin and when used will change the cursor to a hand or pointer on the desired element. As you can see, this mixin does not have any variables and is a very simple example of a mixin.
While other mixins deal with similar patterns with subtle differences that will be handled by the parameters and the dynamic structure of a mixin. Let's start looking into mixins in more detail.