как выбрать root переменную класса в другой класс в css

Question

<style>
    :root product6 {
        --width:435px;
    }
    :root .size1 {
        --scale: 0.8;
    }
    :root .size2 {
        --scale: 0.7;
    }

    .productDiv {transform:scale(--scale);}
</style>

<div class="product6 size1"></div>

Это работает хорошо, если я даю классы внутри div класса attr ... показывая мой div с масштабом 0,8 и шириной 435px

Но как я могу выбрать класс size1 внутри css синтаксиса под таблицей стилей

.productDivResponsive {width:435px;transform:scale(???)}

Спасибо.

Answer 1

Это работает хорошо, если я даю классы внутри div класса attr ... показывая мой div, масштабированный 0,8 и шириной 435px

Код не может работать Синтаксически ошибочно.

Но как мне выбрать класс size1 внутри css синтаксиса под таблицей стилей?

Добавление знака вопроса было моим редактированием.

CSS - это stati c, жестко запрограммированный, так что просто напишите его так же, как вы делаете с остальной частью CSS. Я надеюсь, что вы не спрашиваете, как динамически манипулировать CSS в таблице стилей, потому что вам нужно получить asp продвинутые концепции, относящиеся к CSS и практические знания JavaScript.

---

Демо

Примечание: Подробности прокомментированы в демоверсии

/*
Declare CSS variables
:root is the best selector to use because all descendants
will have access to them.

--=These are VALUES ONLY=--
They cannot be assigned to a selector directly
They can only be assigned to a property
propert: value is assigned to a selector
*/

:root {
  --w435: 435px;
  --scX070: 0.7;
  --scX120: 1.2;
}

.box {
  background: gold;
  color: blue;
  outline: 3px solid blue;
  margin: 20px auto;
  min-height: 30px;
  /* 
  This is the proper syntax when assigning the value of a
  CSS variable to a property
  ${selector} {${property}: var(--${CSSVar});}
     .box     {    width:      var(--w435);  }
  */
  width: var(--w435);
}

.size1 {
  transform: scaleX(var(--scX070));
}

.size2 {
  transform: scaleX(var(--scX120));
}

<div class='box'></div>
<div class="box size1"></div>
<div class="box size2"></div>

Answer 2

Если я использую этот код, я могу сделать то, что мне нужно ... но я не хочу писать классы дважды ... Проблема в том, что я хочу использовать div где-то, например, c где-то реагировать ...

<style>
    :root .product6 {
        --width:435px;
    }
    :root .size1 {
        --scale: 0.8;
    }
    :root .size2 {
        --scale: 0.7;
    }

    .productDiv {transform:scale(--scale);}

@media (min-width: 1600px) {
    :root {
        --scale:0.8;
    }
    .productDivResponsive {transform:scale(var(--scale));}
}

@media (max-width: 1600px) and (min-width: 1360px) {
    :root {
        --scale:0.7;
    }
    .productDivResponsive {transform:scale(var(--scale));}
}

</style>

<div class="product6 productDiv"></div> <!-- This one static and scaling my div 0.8 -->

и хочу, чтобы он где-то на моей странице отвечал требованиям к написанию чего-то подобного;

<div class="productDivResponsive"></div>

мой div productDivResponsive должен масштабироваться в соответствии с моими медиазапросами ...

как мне удалить повторяющиеся root переменные класса?

Я надеюсь, что смогу объяснить, что мне нужно ... Возможно ??

Answer 3

Определите ваши переменные в элементе root (:root), чтобы они были доступны везде. Затем определите классы и идентификаторы, которые используют эти переменные любым удобным для вас способом.

(Если вы хотите более узкую область, вы также можете определить свои переменные для другого элемента. Вам не обязательно используйте :root. Посмотрите на специальный раздел в моем примере.)

/* define vars for everywhere, as everything inherits from root */
:root {
  --width: 100px;
  --height: 100px;
  --scale-1: 0.8;
  --scale-2: 0.6;
  --scale-3: 0.4;
  --c-green: #3d9970;
  --c-red: #ff4136;
  --c-blue: #0074d9;
}

/* define vars for a specific part of your page, overriding root in this example */
#special {
  --c-green: #01FF70;
  --c-red: #f012be;
  --c-blue: #7fdbff;
  border: 1px solid #ccc;
}

section {
  margin: 10px;
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.product {
  width: var(--width);
  height: var(--height);
  box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.4);
  color: rgba(60, 60, 60, 0.7);
  font-family: sans-serif;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.3))
}

.scale-1 {
  transform: scale(var(--scale-1));
}

.scale-2 {
  transform: scale(var(--scale-2));
}

.scale-3 {
  transform: scale(var(--scale-3));
}

#product-2 {
  background-color: var(--c-green);
}

#product-3 {
  background-color: var(--c-red);
}

#product-4 {
  background-color: var(--c-blue);
}

#product-5 {
  background-color: var(--c-green);
}

#product-6 {
  background-color: var(--c-red);
}

#product-7 {
  background-color: var(--c-blue);
}

/* within scope of #special, colors are different: */

#product-10 {
  background-color: var(--c-blue);
}

#product-11 {
  background-color: var(--c-red);
}

#product-12 {
  background-color: var(--c-green);
}

<main>
  <section>
    <div id="product-1" class="product">1</div>
    <div id="product-2" class="product scale-1">2</div>
    <div id="product-3" class="product scale-2">3</div>
    <div id="product-4" class="product scale-3">4</div>
  </section>
  <section>
    <div id="product-5" class="product scale-3">5</div>
    <div id="product-6" class="product scale-2">6</div>
    <div id="product-7" class="product scale-1">7</div>
    <div id="product-8" class="product">8</div>
  </section>
  <section id="special">
    <div id="product-9" class="product scale-2">9</div>
    <div id="product-10" class="product scale-2">10</div>
    <div id="product-11" class="product scale-2">11</div>
    <div id="product-12" class="product scale-2">12</div>
  </section>
</main>