CODEWITHSUNDEEP
csssass
AlexK
AlexK

Reputation: 426

SCSS &- multiple string options

I have never used .scss files before and am trying to make a simple change.

&-tabbed {
  //some code
}
&-list {
   //some other code
}
&-tableau {
  //some code
}

I want to make the third option the same as the first without having a new class. How do I accomplish this?

Upvotes: 0

Views: 447

Answers (3)

PDSSandeep
PDSSandeep

Reputation: 189

Create a Mixin.

@mixin mixinname{

width:100px;
height:100px;
border:1px solid #000;

}

Add this mixin
&-tabbed {

  @include mixinname;

}

&-tableau {
      @include mixinname;  
}

Upvotes: 1

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

You can use @extend it will copy all the styles and give to the class you want

.wrapper {
  &-tabbed {
    color: red;
    font-size: 1rem;
  }
  &-list {
     //some other code
  }
  &-tableau {
    @extend .wrapper-tabbed
  }
}

the result will be like that

.wrapper-tabbed, .wrapper-tableau {
  color: red;
  font-size: 1rem;
}

You also can use placeholder selectors

%placeholder {
  color: red;
  font-size: 1rem;
}


.wrapper {
  &-tabbed {
    @extend %placeholder;
  }
  &-list {
     //some other code
  }
  &-tableau {
    @extend  %placeholder;
  }
}

the result will be the same

.wrapper-tabbed, .wrapper-tableau {
  color: red;
  font-size: 1rem;
}

MIXIN usage Notice that it will render the styles 2 times its not extending it 

@mixin styles{
  color: red;
  font-size: 1rem;
}

.wrapper {
  &-tabbed {
    @include styles;
  }

  &-tableau {
    @include styles;  
  }
}

result will be like that

.wrapper-tabbed {
  color: red;
  font-size: 1rem;
}
.wrapper-tableau {
  color: red;
  font-size: 1rem;
}

Upvotes: 1

muecas
muecas

Reputation: 4335

You do not need a mixing or any special code for that. Just separate the rules with , as you do in common css:

&-tabbed,
&-tableau {
  //some code
}
&-list {
 //some other code
}

Upvotes: 0

Related Questions