Как применить стили как к классу, так и к медиа-запросу в SASS?

Question

На мобильных устройствах мой заголовок должен быть всегда липким. На других устройствах он должен быть липким только в том случае, если он имеет класс sticky:

.header {
  &.sticky {
    position: fixed;
    // other styles
  }
}

@media only screen and (max-width: 600px) {
  .header {
    position: fixed;
    // other styles
  }
}

Я хочу писать свои стили только один раз (принцип СУХОЙ), есть ли способ добиться этого с помощью SASS?

Это может выглядеть так:

.header {
  @include media_600,
  &.sticky {
    position: fixed;
  }
}

.. или что-то подобное, но я не знаю что.

Answer 1

Я думаю, что вы на правильном пути. Создание миксина с блоком контента (https://sass -lang.com / documents / at-rules / mixin # content-blocks ) позволит вам добавлять стили без необходимости снова указывать селектор, а такжепозволит вам использовать его во всем коде.

@mixin mobile {
  @media only screen and (max-width: 600px) {
    @content;
  }
}

.header {
  &.sticky {
    position: fixed;
  }

  @include mobile { 
    position: fixed;
  }
}

Если вы хотите написать свойство CSS только один раз, вы можете сделать это.

@mixin sticky-header {
  position: fixed;
}

.header {
  &.sticky {
    @include sticky-header;
  }

  @media only screen and (max-width: 600px) { 
    @include sticky-header;
  }
}