Как писать медиа-запросы CSS с помощью миксинов SASS

Введение

Если вы веб-разработчик, то вы уже знаете, что написание медиа-запросов может быть пугающим, особенно когда есть большой проект с множеством точек останова. Поверьте, я знаю, что вы чувствуете. Вот почему вам нужен надежный и надежный способ их написания, где и когда они вам нужны. Для этого все, что вам нужно, — это миксины и некоторые управляющие директивы, которые предоставляются нам с помощью синтаксиса SASS (SCSS).

Если вы новичок во всем этом … Это совершенно круто. Я тоже был новичком несколько месяцев назад. Все, что вам нужно знать, это как писать CSS, потому что мы этим и займемся. Итак, SASS , как я упоминал ранее, — это CSS, но с некоторыми сверхспособностями. Вы когда-нибудь задумывались, можно ли использовать переменные, вложенные правила или даже функции внутри CSS? Что ж, вы можете сделать это и многое другое с помощью Sass. Самое приятное то, что вы можете начать работу с Sass бесплатно с их документами.

Начало работы

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

Я предполагаю, что вы уже используете SASS/SCSS в своем проекте и знаете, как их настроить. . Итак, давайте начнем с _mixins.scss , где мы поместим все нюансы, необходимые для наших медиа-запросов, такие как области просмотра, точки останова и некоторые причудливые SCSS.

  //ответ - это имя вашего миксина @ mixin response ($ breakpoint) {//$ breakpoint - это просто переменная, которая может иметь несколько значений @if $ breakpoint == tablet {//здесь `laptop` -  значение $ breakpoint//при вызове ноутбука мы имеем в виду следующий фрагмент кода @media only screen and (max-width: 600px) {@content;  }} @if $ breakpoint == мобильный {@ только экран для мультимедиа и (max-width: 480 пикселей) {@content;  }}}  

Теперь мы будем использовать эти медиа-запросы в нашем файле _layouts.scss, где мы стилизуем класс .main:

  .main {фон: красный; //здесь нормальный код стиля @include response (tablet) {background: green; //адаптивный код для области просмотра планшета, например, 600 пикселей} @include response (mobile) {background: blue; //адаптивный код для мобильного окна просмотра, например 480 пикселей}}  

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

  .main {background: red;  @media только экран и (максимальная ширина: 600 пикселей) {фон: зеленый;  } @media only screen и (max-width: 480px) {background: blue;  }}  

Заключение

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

Код

Попробуйте изменить размер браузера и посмотрите, как изменится цвет фона.

  • Вывод
  • HTML
  • CSS (SCSS)
Оцените статью
nanomode.ru
Добавить комментарий