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

Question

[make_dev]

Добрый день! Осваиваю Sass? и возник след.вопрос.
Возможно ли использовать переменные Sass след. образом: сначала в основном файле стилей указываю одно значение переменной, например, padding. А затем в Media-queries для каждого разрешения изменяю переменную до нужного значения?

Answer 1

[Алексей Немиро]

Да, можно:

$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
  }
}

Answer 2

[Алексей Струков]

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