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

Question

[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, пробывал их подставлять к переменной, но эффекта не последовало, потом пробовал играться с "_" перед именами файлов...

Какие должны быть условия чтобы можно было изменить переменную из другого файла?

Answer 1

[Сергей delphinpro]

Что вы пробовали?
Типа такого:

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

Comments

[Cepesh16]

.variables.scss:

// text size
    $font-logo: 30px;
    $font-logo--footer: 46px;
    $font-h1: 50px;
    $font-h2: 20px;
    $font-h3: 30px;
    $font-h4: 24px;
    $font-h5: 18px;
    $font-p1: 15px;
    $font-p2: 14px;
    $font-p3: 12px;

style.scss

&__title {
        font-size: $font-p2;

    }
    &__text {
        font-size: $font-p1;
    }

.media.scss:

@media (max-width: 992px) {
    // text size
    $font-logo: 30px;
    $font-logo--footer: 46px;
    $font-h1: 50px;
    $font-h2: 20px;
    $font-h3: 30px;
    $font-h4: 24px;
    $font-h5: 18px;
    $font-p1: 15px;
    $font-p2: 14px;
    $font-p3: 12px;

Ищу самое простое решение, и мне кажется практичнее объявить 1 раз $font-p1 и прописать ее двадцати элементам, а затем в запросе за 1 секунду поменять значение во всех элементах. Нежели объявлять несколько переменных для всех брейкпоинтов (sm, m, xl..) и потом в запросе двадцати элементам прописывать $font-p-sm, и потом еще двадцати $font-p-m.

Но ежели так не работает, видимо другого выхода не останеся и буду пробовать внедрять данный метод.