Css 如何在类中嵌套选择器

我想动态更改特定块项中所有项的属性。我设想css有一个如下的结构，但无法弄清楚具体的语法。我将使用javascript或类似工具动态更改块项的类id，即cls1和cls2

.cls1 {x: y=z1; ...
     h1 {}
     p {}
     img {}
     a {} ...
    }
.cls2 {x: y=z2; ...
     h1 {}
     p {}
     img {}
     a {} ...
    }
- - - - - - - - -
<div class="cls1">
    ...
    </div>

.cls1{x:y=z1。。。
h1{}
p{}
img{}
a{}。。。
}
.cls2{x:y=z2。。。
h1{}
p{}
img{}
a{}。。。
}
- - - - - - - - -
...

对于直接CSS，语法如下所示：

.cls1 h1{
...
}
.cls1 p{
...
}
.cls1 img{
...
}
.cls1 a{
...
}
.cls2 h1{
...
}
.cls2 p{
...
}
.cls2 img{
...
}
.cls2 a{
...
}

使用CSS预编译器（如），您可以使用问题中的语法

.cls1{
h1{…}
p{…}
img{…}
a{…}
}
.cls2{
h1{…}
p{…}
img{…}
a{…}
}

您要查找的是在发布前编译的。您不能。您可以使用css编译器，如

less

或

sass