Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sass mixin that takes a class as it's argument

Tags:

sass

I'm trying to create a Sass mixin that takes a class as it's argument:

@mixin myMixin($el){
  > #{$el}{
    background: white;
  }
}

.myClass1{
  @include myMixin(div);
}

The above code works fine. I.e., elements are accepted.

But this calls an error:

.myClass1{
  @include myMixin(.myClass);
}

I've tried wrapping it in quotes and #{} but still no dice.

Curiously, the * selector also does not work.

like image 512
sanjaypoyzer Avatar asked May 28 '14 19:05

sanjaypoyzer


People also ask

How do you pass arguments in mixin?

Variable argument is used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin. Keyword arguments passed to the mixin can be accessed using keywords($args) function which return values mapped to String.

Which arguments are used to include arguments in the mixin?

Keyword arguments: The arguments are used to include in mixins. These types of arguments, if named, can be passed in any order and their default values can be skipped.

What is the difference between a mixin and inheritance in SCSS?

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


1 Answers

You need to quote your class:

.myClass1{
  @include myMixin(".myClass");
}
like image 148
cimmanon Avatar answered Oct 08 '22 09:10

cimmanon