Why should I use the SASS mixin?
I know I can use mixins to extend sass classes with some common styles. On the other hand, I can just do it with a class and set it to the corresponding html element.
- So why should I use it?
- When would you recommend using it?
- Does he have any advantage?
- Is it regarded as a standard?
source to share
You use a mixin when you don't always want the same values applied to the selector.
For example, if you wanted to do something with rounded corners, you would create a mixin that takes a "radius" parameter:
=borderRadius($value)
border-radius: $value
-webkit-border-radius: $value
-moz-border-radius: $value
-o-border-radius: $value
Then elsewhere, you can do:
.selector1
+borderRadius(5px)
.selector2
+borderRadius(10px)
It is mostly DRY. Ti makes the code more maintainable, and when you don't need to maintain Opera, for example, you just delete -o-border-radius
in one place instead of searching all your files and deleting it from multiple places.
source to share
There are several advantages to using mixins:
1) To use a class, you must mark all html elements with such a class (= create unnecessary overhead), a mixin can be an extension of an existing class, and also create additional classes if necessary.
2) Mixes can take parameters, making them very dynamic and recoverable. You only need one parameterized mix where you need multiple classes. (boderradii, colors, transparencies, fonts, etc.):
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
* Example from Sass-Doc
3) Classes must have semantic meanings. Mixins should look more like codes that can be used in different places.
A good and more complex example of all of these points that I mentioned above is the pduersteler mixin.
source to share
As an example for mixins; Let's say you have a sprite with icons in a fixed grid. Icons are 32x32px each and you want to generate icons based on this sprite for 32x32px and 16x16px. That a mixin can be quite handy.
@mixin icon($name, $left, $top)
{
&.#{$name}-16:not(.raw)
{
&:before
{
float: left;
content: "";
width: 16px;
height: 16px;
margin-right: 8px;
background-size: 300px 300px;
background-image: image_url('icons/sprite_gray.png');
background-position: -#{$left * 16}px -#{$top * 16}px;
}
&:hover:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 1}px; }
&.active:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 2}px; }
&.active.contrast:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 3}px; }
}
&.#{$name}-16.raw
{
width: 16px;
height: 16px;
background-size: 300px 300px;
background-image: image_url('icons/sprite_gray.png');
background-position: -#{$left * 16}px -#{$top * 16}px;
}
&.#{$name}-32:not(.raw)
{
&:before
{
content: "";
width: 32px;
height: 32px;
background-size: 600px 600px;
background-image: image_url('icons/sprite_gray.png');
background-position: -#{$left * 32}px -#{$top * 32}px;
}
&:hover:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 1}px; }
&.active:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 2}px; }
&.active.contrast:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 3}px; }
}
&.#{$name}-32.raw
{
display: inline-block;
width: 32px;
height: 32px;
background-size: 600px 600px;
background-image: image_url('icons/sprite_gray.png');
background-position: -#{$left * 32}px -#{$top * 32}px;
}
}
So, with this mixin, I can specify the name and position of the icon to create styles, for example:
.icon {
@include icon(user, 1, 1);
@include icon(role, 5, 1);
}
which gives me user-16, user-32, role-16, role-32
classes to implement icons.
(In this example, they are added as content :before
if you are not using .raw
)
source to share