Mixins are blocks of code that you can reuse multiple times and when Sass gets compiled, they will be included and written out. Let's have a look at a simple mixin:
@mixin transition {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}Now, let's talk about the previous code. First, you will see @mixin. You need this on every mixin you create, as this tells Sass you are declaring a mixin. Then, you will see transition. This is just a name to describe what the mixin is for; it can be anything you like. As this mixin is for the transition CSS attribute, we will call it transition. If it was for rounded corners, we would call it something like @mixin rounded-corners {}. Now, you will see plain old CSS for all the different browser prefixes. Prefixes are used to make sure that all of the browsers can recognize the transition attribute. Now that we have the transition...