Как в сасс задавать набор свойств через переменную?

Question

[Igorek98]

Можно ли в сасс задать переменной набор свойств и передавать их ею?
Например, не хочу я в каждом 2-ом блоке писать

position:relative;
width:100%;
height:auto;

Могу я это как-то более сокращенно назначать?

Answer 1

[Сергей delphinpro]

Либо использовать миксины

@mixin mix1 {
  position:relative;
  width:100%;
  height:auto;
}

.selector {
  @include mix1;
}

Либо экстенды. От плейсхолдеров

%set1 {
  position:relative;
  width:100%;
  height:auto;
}

.selector {
  @extend %set1;
}

или от классов

.someclass {
  position:relative;
  width:100%;
  height:auto;
}

.selector {
  @extend .someclass;
}

Comments

[Igorek98]

А как мне получать @mixin из других файлов?
Например, если я не хочу хранить миксины в одном файле, а использовать в других?

[Сергей delphinpro]

Igorek98, Посмотрите бутстрап.
Обычно так и делают.
Один главный файл, в него по порядку импортируют переменные, миксины, другие файлы со стилями.

main.scss

@import 'variables.scss';
@import 'mixins.scss';
@import 'normalize.scss';
@import 'base.scss';
// ...

[Igorek98]

Сергей delphinpro, спасибо

Answer 2

[IIIu6ko]