Как мне сделать эффект насыщения на обычном css?

Question

[zeni1agent]

У меня есть вот такой код

@mixin colors(){
  @for $i from 1 through 5 {
.block input[type="radio"]:checked ~ label:nth-child(#{$i*2}){
  $color2: hsl(0,  80/$i, 60%);
   background-color:$color2;   
    }
 } 
}

@include colors;

.block{
 display:flex;
 flex-direction: row-reverse;
 justify-content: center; 
}
.block input{
 display:none;
}

label{
  width:100px;
  height:100px;
   background-color:#878787;
  margin:10px;
}

<div class="block">
<input type="radio" name="test" id="id_test_5" value="5" /> 
<label for="id_test_5"></label> 
<input type="radio" name="test" id="id_test_4" value="4" /> 
<label for="id_test_4"></label> 
<input type="radio" name="test" id="id_test_3" value="3" /> 
<label for="id_test_3"></label> 
<input type="radio" name="test" id="id_test_2" value="2" /> 
<label for="id_test_2"></label> 
<input type="radio" name="test" id="id_test_1" value="1" /> 
<label for="id_test_1"></label> 
</div>

РАБОЧИЙ ПРИМЕР ===> codepen <===

Но проблема в том что я не могу использовать его на wordpress
Есть ли у кого советы как сделать подобный эффект на простом css
Или хотя бы на js, jquery.
что бы не писать вот такой длинный код по сотню раз.

.block input[type="radio"]:checked ~ label:nth-child(2) {
  background-color: #eb4747;
}

.block input[type="radio"]:checked ~ label:nth-child(4) {
  background-color: #c27070;
}

.block input[type="radio"]:checked ~ label:nth-child(6) {
  background-color: #b47e7e;
}

.block input[type="radio"]:checked ~ label:nth-child(8) {
  background-color: #ad8585;
}

.block input[type="radio"]:checked ~ label:nth-child(10) {
  background-color: #a98989;
}

.block {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.block input {
  display: none;
}

label {
  width: 100px;
  height: 100px;
  background-color: #878787;
  margin: 10px;
}

Comments

[Rustam Bainazarov]

Никак.

Только в будущем с помощью функций свойств, похожих на функции SASS. У них там в планах добавить аналоги darken() и lighten().

[Rustam Bainazarov]

Ну а вообще, таки можно сделать с помощью HSLA и переменных:

https://codepen.io/MahdIM/pen/jymWbj

[zeni1agent]

Рустам Байназаров, Просто записать цвет в переменную ни чем не лучше

.block input[type="radio"]:checked ~ label:nth-child(2) {
  background-color: #eb4747;
}

.block input[type="radio"]:checked ~ label:nth-child(4) {
  background-color: #c27070;
}

.block input[type="radio"]:checked ~ label:nth-child(6) {
  background-color: #b47e7e;
}

.block input[type="radio"]:checked ~ label:nth-child(8) {
  background-color: #ad8585;
}

.block input[type="radio"]:checked ~ label:nth-child(10) {
  background-color: #a98989;
}

[Rustam Bainazarov]

zeni1agent, не лучше или хуже?

Вы с помощью CSS-переменной можете контролировать насыщенность и яркость принимая за основу исходный цвет. И менять цвет с помощью CSS в одной переменной без необходимости перекомпиляции.

Ну а вообще, не очень понимаю в чём прикол, если вы уже сделали классы нужного вам компонента. Опять, же, если у вас несколько одинаковых блоков с этими инпутами, но они различаются лишь только исходным цветом, то это удобно сделать на CSS-переменных для кастомизации. Меняется значение переменной в нужном месте — и вперёд с песней.

[zeni1agent]

Рустам Байназаров, Я прикрасно знаю о том что в css существуют переменные и я спокойно мог мы просто сохранить значение основного цвета в одну из них

:root { 
  --color: 10;
}

.block input[type="radio"]:checked ~ label:nth-child(2){
background-color: hsl(var(--color),  calc( 100%/1 ), 60%);
}
.block input[type="radio"]:checked ~ label:nth-child(4){
background-color: hsl(var(--color),  calc( 100%/1.3), 60%);
}
.block input[type="radio"]:checked ~ label:nth-child(6){
background-color: hsl(var(--color),  calc( 100%/1.6 ), 60%);
}
.block input[type="radio"]:checked ~ label:nth-child(8){
background-color: hsl(var(--color),  calc( 100%/1.8 ), 60%);
}
.block input[type="radio"]:checked ~ label:nth-child(10){
background-color: hsl(var(--color),  calc( 100%/2), 60%);
}

Проблема в том что код от этого становится очень длинным особенно когда .block не один а целых 20 и в каждом из них по 15 label
Во первых чтение длинного кода занимает время и ресурсы
А во вторых как мне объясняли писание одного и того же кода
который технически можно вывести коротким циклом но не делается .
считается дурным тоном

[Rustam Bainazarov]

zeni1agent, не совсем понял вашей претензии к CSS, если вы уже всё знаете и если у CSS функций нет в принципе, чтобы можно было вместо свойства писать функцию. Иных решений вы не узреете; только в рамках языка. Сократить синтаксис записи CSS-переменной вы не сможете.

P. S. Не вижу абсолютно никакой проблемы в такой длине простого свойства с ровно одной переменной.