Совмещение класса, переменных медиа-запроса

Question

Задача задать переменную в root для определенного класса еще и с учетом @media. То есть нужно примерно так:

@media {
:root {
.class * {
--переменная; 
}
}
}

Или так:

@media {
.class * {
:root {
--переменная; 
}
}
}

В каком варианте вложенность сработает. И возможно ли так вообще?

Answer 1

Исходя из ваших предположений, правильная иерархия будет

@media {
  :root selector {
    --variables: value;
  }
}

:root {
  --size: 100px;
}

body {display: flex; gap: 5px;}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size);
  height: var(--size);
}

.small-box {
  display: block;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
}

.red {
  background-color: #f00;
}

.blue {
  background-color: #00f;
}

.purple {
  background-color: purple;
}

.green {
  background-color: green;
}

@media screen and (max-width: 768px) {
   :root .blue {
    --size: 50px;
  }
}

<div class="box red">
  <div class="small-box purple"></div>
</div>
<div class="box blue">
  <div class="small-box green"></div>
</div>

Но смысла писать :root я лично не вижу, ибо если мы переназначим переменную в определённом классе, то дальше по вложенности будет использоваться уже изменённая переменная.

:root {
  --size: 100px;
}

body {display: flex; gap: 5px;}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size);
  height: var(--size);
}

.small-box {
  display: block;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
}

.red {
  background-color: #f00;
}

.blue {
  background-color: #00f;
}

.purple {
  background-color: #800080;
}

.green {
  background-color: #008000;
}

@media screen and (max-width: 768px) {
  .blue {
    --size: 50px;
  }
}

<div class="box red">
  <div class="small-box purple"></div>
</div>
<div class="box blue">
  <div class="small-box green"></div>
</div>

БЛОГ НА HUSL

Совмещение класса, переменных медиа-запроса

Ответы (1 шт):