Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to overload mixins in sass?

Tags:

sass

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?

like image 342
Tomas Jansson Avatar asked Oct 07 '11 13:10

Tomas Jansson


People also ask

What is the difference between mixin and extend in sass?

@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.

What is the purpose of using mixin in sass?

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.

What are mixins in SCSS?

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.


2 Answers

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;  } 
like image 185
numbers1311407 Avatar answered Sep 29 '22 05:09

numbers1311407


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

like image 33
CodeMonkey Avatar answered Sep 29 '22 06:09

CodeMonkey