how to select root class variable into another class in css - 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>
This is working well if I give classes inside div class attr...showing my div scaled 0.8 and width 435px
But how can I select size1 class inside css syntax under stylesheet
.productDivResponsive {width:435px;transform:scale(???)}
Thanks.

Answer 1

Define your variables in root element (:root), so that they are available everywhere. Then define classes and ids, that use those variables in any way you see fit.
(If you want a narrower scope, you can also define your vars for another element. You do not necessarily have to use :root. Have a look at the special section in my example.)
/* 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>

Answer 2

This is working well if I give classes inside div class attr...showing my div scaled 0.8 and width 435px
The code provided cannot possibly work, it's syntactically erroneous.
But how can I select size1 class inside css syntax under stylesheet?
Addition of question mark was my edit.
CSS is static, hard coded, so just write it in just as you have with the rest of your CSS. I hope you are not asking how to dynamically manipulate CSS on the stylesheet because you need to grasp the advanced concepts dealing with CSS and working knowledge of JavaScript.
Demo
Note: Details are commented in demo
/*
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 3

If I use this code I can make that I need...but I don't want to write classes twice...Problem is I want to use divs somewhere static somewhere responsive...
<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 -->
and want to make it responsive somewhere in my page with writing code something like that;
<div class="productDivResponsive"></div>
my productDivResponsive div must be scaled according to my media queries...
how can I remove repeating root class variables?
I hope I can explain what I need...Possible??