Использование контрольных точек в SASS

Всем привет! В этом небольшом руководстве я хотел бы познакомить вас с простым способом использования media queries в sass.

Я задал несколько контрольных точек ширины области просмотра и объединил их в mixin, в который можно  передать строковые ключи любой из объявленых мною точек. 

Для каждой контрольной точки я создал собственный текстовый блок внутри контейнера. Каждый их них будет отображаться только в своей контрольной точке.

Весь исходный код примера и результат расположены ниже. Измените ширину окна вашего браузера, чтобы увидеть, как срабатывают контрольные точки.

See the Pen XpXpoO by Vasiliy Vanin (@vaninv) on CodePen.

Как использовать контрольные точки в SASS

Создание примеси (mixin) и определение контрольных точек

Первое, что мы должны сделать, это определить сами контрольные точки, придумать для них названия и написать медиа-запросы.

Предположим, что мы определили следующие контрольные точки, для телефона, планшета и остальных экранов:

Ключ Ширина Медиа запрос
xs <= 540px @media all and (max-width: 540px)
sm >= 640px @media all and (min-width: 640px)
md >= 760px @media all and (min-width: 760px)

Я использую маленькие разрешения потому, что максимальная ширина контейнера у моего примера всего 800 пикселей.

Теперь создадим mixin для наших контрольных точек, все очень просто:

@mixin breakpoint($point) {
  
  @if $point == sm {
    @media all and (min-width: 640px) { @content ; }
  }
  
  @else if $point == md {
    @media all and (min-width: 760px) { @content ; }
  }  
	
  @else if $point == xs { 
    @media all and (max-width: 540px) { @content ; }
  }
}

Вы можете добавить столько ключей и правил, сколько вам необходимо.

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

Использовать mixin очень просто, к примеру, нам нужен контейнер во всю ширину с отступом в 50px для экранов свыше контрольной точки xs и 10px для маленьких экранов:

.my-container {
	
	margin: 0 50px;

	@include breakpoint(xs) {
		margin: 0 10px;
	}
}

В результате компиляции мы получим вот такой код CSS:

.my-container {
	
	margin: 0 50px;
}

@media all and (max-width: 540px) { 
	
	.my-container {
		margin: 0 10px;
	}
}

Более подробный пример расположен выше в плагине codepen. Я уверен, что вы без труда разберетесь. 

Такой подход имеет ряд преимуществ. Это удобно, читабельно и компактно. Это предоставляет возможность задать контрольные точки в одном файле и при необходимости перемещать его из проекта в проект, меняя при необходимости запросы.

Если подход вам понравился, читайте нашу статью об организации файлов с исходным кодом SASS. 

Чтобы узнать больше о правилах адаптивной верстки, прочитайте серию статей "Отзывчивый веб-дизайн" на сайте Google Developers

Спасибо, что прочли статью. Надеюсь, она оказалась полезной )

Vasiliy Vanin - Systems Architect
Василий Ванин
Системный архитектор