@make_dev

Использование переменных Sass в Media Queries?

Добрый день! Осваиваю Sass? и возник след.вопрос.
Возможно ли использовать переменные Sass след. образом: сначала в основном файле стилей указываю одно значение переменной, например, padding. А затем в Media-queries для каждого разрешения изменяю переменную до нужного значения?
  • Вопрос задан
  • 4211 просмотров
Решения вопроса 2
AlekseyNemiro
@AlekseyNemiro
full-stack developer
Да, можно:
$padding: 8px;

div {
  padding: $padding; // 8px
}


@media (min-width: $screen-tablet) {
  $padding: 4px;

  div {
    padding: $padding; // 4px
  }
}

Главное не запутаться :-)

Возможно лучшим решением будет не менять исходное значение, а производить вычисления:
$padding: 8px;

div {
  padding: $padding; // 8px
}


@media (min-width: $screen-tablet) {
  div {
    padding: ($padding - 4); // 8 - 4 = 4px
  }
}
Ответ написан
Комментировать
pm_wanderer
@pm_wanderer
junior-HTML
Так не получится.
После компиляции в CSS все переменные присвоят свои текущие значения свойствам и исчезнут из файла. Соответственно, когда вы будете менять разрешение браузера и начнут срабатывать связанные с этим разрешением медиазапросы, то внутри них уже не будет переменных, которые смогут изменить паддинги и другие свойства.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы