Как лучше использовать миксин для @media в Sass?

Question

[beastbrook]

Начал учить Sass и столкнулся с большим количеством возможностей по организации кода.
Допустим, я сделал миксин для медиавыражений:

@mixin mw($width) {
  @media (max-width: $width + 'px') {
    @content
  }
}

А затем использую его прямо в файле компонента навигации, например так:

.main-nav {
  padding: 0 20px;
  margin-bottom: 20px;
  
  &__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    
    @include mw(720) {
      flex-direction: column;
      align-items: center;
    } 
  }
  
  &__item {
    margin-right: 15px;
    
    @include mw(720) {
      margin-right: 0;
    }
    
    &:last-child {
      margin-right: 0;
    }
  }
  
  &__link {
    font-size: 20px;
    color: red;
    text-decoration: none;
    
    @include mw(720) {
      font-size: 30px;
      color: pink;
    }
  }
}

Это в целом адекватный подход или никто так не делает? Понятно, что в целом все зависит от соглашения в команде, но может есть какая распространенная практика, например, выделять все медиавыражения и держать в отдельном файле, скажем _media.scss.

Answer 1

[Alexander Pushkarev]

// _variables.scss

$breakpoints: (
	'xs': ('(max-width: 576px)'),
	'sm': ('(max-width: 768px)'),
	'md': ('(max-width: 992px)'),
	'lg': ('(max-width: 1199px)'),
);

// _mixins.scss

@mixin respond-to($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		@media #{inspect(map-get($breakpoints, $breakpoint))} {
			@content;
		}
	} @else {
		@error 'Не указано значение для `#{$breakpoint}`';
	}
}

// Использование

@include respond-to('md') {
	// ...
}

Comments

[beastbrook]

За миксин спасибо, но я то спрашивал про другое. Принято писать эти миксины прямо в компоненте, как моем примере или выносить в отдельный файл, где лежат только медиавыражения?

[Alexander Pushkarev]

beastbrook, я пишу всё в одном файле. 1 компонент = 1 файл, вверху код, внизу миксин