@Cepesh16

Как изменить значение переменной из другого файла?

Сверстал лендинг, осталось сделать медиа-запросы. Создал переменные с размерами шрифтов в variables.scss ($font-h1). В файле media.scss попробовал изменить значение $font-h1 - ничего не поменялось.

Струкура следующая. Есть style.scss в нем:
@import "variables.scss";
// между ними еще несколько файлов (header.scss, footer.scss и т.д.)
@import "media.scss";


Узнал что обращаться к переменной можна только из одного файла, поэтому попробовал внутри variables.scss импортировать media.scss, потом попробовал наоборот, потом поплясал с бубном нагуглил свойства !default, !global, пробывал их подставлять к переменной, но эффекта не последовало, потом пробовал играться с "_" перед именами файлов...

Какие должны быть условия чтобы можно было изменить переменную из другого файла?
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Что вы пробовали?
Типа такого:

$h1: 30px;

h1 { font-size: $h1; }

@media(){
  $h1: 20px;
}


Так оно не работает.

Определите несколько переменных

$h1: 30px;
$h1-sm: 20px;

h1 { font-size: $h1; }

@media(){
  h1 { font-size: $h1-sm; }
}


Или используйте пользовательские свойства, они же css-переменные:

:root {
  --h1: 30px;
}

h1 {  font-size: var(--h1, 30px); }

@media(){
  :root {
    --h1: 20px;
  }
}
Ответ написан
Ваш ответ на вопрос

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

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