AndrewMk AndrewMk - 2 months ago 14
Sass (Sass) Question

nested mixins with fluid argument

I have 2 divs

<div class="first-div"></div>
<div id="second-div"></div>


now I defined a mixin using scss like this for border

@mixin border($thickness, $border-type, $color){
border:$thickness $border-type $color;}


this mixixn by itself is nested in another one like this

@mixin NestOtherMixins{
@include border(2px, solid, red);
}


I will be including this mixin(NestOtherMixins) to both the class and the id that each of them target a div, but here is the trick I want to apply a different color when applying the mixin so the div with the class attribute will have say a red color and the id will be in blue. Doing like this

.first-div{
@include NestOtherMixins;
}
#second-div{
@include NestOtherMixins;
}


will only result in the same color for both divs. Some suggestions that I segregate the mixins and I will be able to control the variables of the borders, but I'm wondering can I nest the border mixin inside another one and be abe to control the variables when applied to different classes or ids?

Answer

You can not change the value of a variable/property depending on what kind of selector they are assigned to. Though you could pass a parameter in your mixin to do this selection for you.

.foo {
  @include test-mixin('foo');
}

.bar {
  @include test-mixin('bar');
}

 @mixin test-mixin($value) {

   @if $value == 'foo' {
     //do foo
   } @else if $value == 'bar' {
     //do bar
   }
}