SCSS & - несколько параметров строки

Question

Я никогда раньше не использовал файлы .scss и пытаюсь внести простое изменение.

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

Я хочу сделать третий вариант таким же, как первый, без нового класса.Как мне это сделать?

Answer 1

Создать миксин.

@mixin mixinname{

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

}

Add this mixin
&-tabbed {

  @include mixinname;

}

&-tableau {
      @include mixinname;  
}

Answer 2

Вам не нужно микширование или какой-либо специальный код для этого.Просто разделите правила с помощью ,, как это обычно делается css:

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

Answer 3

Вы можете использовать @extend, он скопирует все стили и передаст класс, который вы хотите

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

результат будет таким:

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

Вы также можете использовать селекторы-заполнители

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


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

результат будет таким же

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

использование MIXIN Обратите внимание , что оно будетрендеринг стилей в 2 раза не расширяет его

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

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

  &-tableau {
    @include styles;  
  }
}

результат будет таким:

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