Вопросы по CSS медиа-запросам - PullRequest
Новая
       6

Вопросы по CSS медиа-запросам

0 голосов
/ 05 сентября 2018

Я пытаюсь выучить медиа-запрос в css, и у меня есть несколько вопросов о некоторых примерах, с которыми я столкнулся. Запросы упомянуты ниже:

  1. Я видел переменную, объявленную в следующем формате в файле .scss, который используется в компоненте реакции: 

    $screen-xs-max: ($screen-sm-min - 1);

    Почему здесь используется -1?

  2. Второй вопрос, который у меня есть, об этом: 

    $large-screens-up: "(min-width: #{$screen-lg-min})";

    У меня есть 2 вопроса об этих строках кода:

    • Почему переменная, объявленная в " ", не превращает ли переменную в строку?

    • Почему # используется здесь? Я думаю, что это найти переменную $screen-lg-min в пути, откуда она импортируется, но я не уверен, что это правильно. Я просто хочу подтвердить, правильно ли это, или поправить меня, если я ошибаюсь.

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

1 Ответ

0 голосов
/ 05 сентября 2018

В SCSS

Рассмотрим $screen-sm-min:546px;, который будет объявлен в файле переменных scss в вашем проекте или в папке модулей узла.

$screen-xs-max: ($screen-sm-min - 1); означает, что значение $screen-xs-max будет на 1 меньше $screen-sm-min, то есть 545px. 

$large-screens-up: "(min-width: #{$screen-lg-min})";

Переменная в scss может использоваться напрямую, используя $varible-name,

Но если вы хотите использовать ту же самую переменную внутри строки в scss, вам придется следовать этому

#{$variable-name} метод

Почему -1

Считайте, что ширина сверхмалых устройств составляет от 0 до 545 пикселей (максимальное значение).

Рассмотрим ширину небольших устройств от 546px (минимальное значение) до 768px (максимальное значение)

Следовательно, максимальная ширина сверхмалых устройств будет 

(min value of small devices) - 1

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

Например, если вы решили изменить значения ширины, вы можете изменить его только в одном месте и позволить формулам обрабатывать оставшееся вычисление ширины

...