Let say you have a mixin for shadow like such:
@mixin box-shadow($offset, $blur, $color) { -moz-box-shadow: $offset $offset $blur $color; -webkit-box-shadow: $offset $offset $blur $color; box-shadow: $offset $offset $blur $color; }
Is it possible to overload that mixin with something like:
@mixin box-shadow($offset, $blur) { @include box-shadow($offset, $blur, #999); }
Or do I have to use different names for the mixins?
@mixin is used to group css code that has to be reused a no of times. Whereas the @extend is used in SASS to inherit(share) the properties from another css selector. @extend is most useful when the elements are almost same or identical. The main difference between the two is in their compiled CSS file.
Sass Mixins The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.
Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like . float-left , and to distribute collections of styles in libraries.
You can't overload, but the typical practice would be to set defaults.
/* this would take color as an arg, or fall back to #999 on a 2 arg call */ @mixin box-shadow($offset, $blur, $color: #999) { -webkit-box-shadow: $offset $offset $blur $color; -moz-box-shadow: $offset $offset $blur $color; box-shadow: $offset $offset $blur $color; }
If you need to tweak a vendor mixin slightly you can copy it to another file - included after the original - and edit it in there, and the vendor's original will be ignored.
@import "_their-mixins"; @import "_our-mixins";
Warning - this may depend on which processor you are using. At time of writing it works great using grunt and grunt-contrib-compass
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With