Могу ли я обновить математическую переменную в CSS в другом месте скрипта

Question

Я использую вертикальное меню в CSS с несколькими переменными. В каждом «разделе» есть несколько подменю, как и следовало ожидать в меню. Когда выбран раздел s, меню сдвигает следующие разделы вниз, чтобы создать достаточно места для списка подменю.

Работает нормально, если у меня такое же количество пунктов подменю, потому что я могу указать cal c (... для создания расстояния.

Проблема, с которой я столкнулся, учитывая, что для каждого раздела есть разные номера подменю, я пытаюсь установить переменную Dynami c Var (... чтобы затем передать количество строк в код, который сдвигает меню вниз, чтобы он сделал это для разные высоты в зависимости от количества подэлементов.

Я не могу понять, как загрузить и передать эту переменную в другое уравнение для создания этого динамического c эффекта. Надеюсь, что вышеприведенное имеет смысл ..

Не уверен, что это даже можно сделать в CSS, и надеялся, что кто-то сможет меня просветить.

Я пытался добавить только то, что мне кажется релевантным кодом.

Установка переменной. Значение по умолчанию - 5 строк. В данный момент не используется высота сброса

:root {
--main-drop-lines:5;
--main-drop-height: calc(68px * var(--main-drop-lines));  // updated
}

Здесь раздел, в котором вниз выпадающие строки умножаются на пиксельное пространство, необходимое для каждой строки подменю, и хочу, чтобы я хотел быть настроен динамически в зависимости от количества строк подменю

input[type='radio']:checked + label {

height: calc(var(--main-drop-lines) * 68px);  /*700px; */  /*325px;  Height of drop separation between section titles */
background: #212e41;
text-indent: 4px;
-webkit-transition-property: height;
transition-property: height;
-webkit-transition-duration: .6s;
      transition-duration: .6s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Это заголовки разделов (здесь показаны только три), и, где я «думаю», уместно как-то загрузить --main-drop-lines с количеством пунктов подменю, так что приведенный выше слайд интервальный код будет динамически корректироваться в соответствии с требуемым пространством.

input[type='radio']:checked + label li:nth-of-type(1) {
-webkit-animation: in 0.15s 0.575s forwards;
      animation: in 0.15s 0.575s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.575s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2){
-webkit-animation: in 0.15s 0.7s forwards;
      animation: in 0.15s 0.7s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.7s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
-webkit-animation: in 0.15s 0.825s forwards;
      animation: in 0.15s 0.825s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.825s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Заголовок первого раздела и элементы подменю, требующие только 3 строки интервала

    <input id="Dashboard" name="radio" type="radio">
    <label for="Dashboard">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png">
    <span>Dashboard</span>
    <div class="lil_arrow"></div>
    <div class="bar"></div>
    <div class="swanky_wrapper__content">
    <ul>
    <li class="nav-item"><a href="../register/memberhome.asp" >Member Home</a></li>
    <li>Tools</li>
    <li>Reports</li>
    <li>Analytics</li>
    </ul>
    </div>
    </label>

Заголовок второго раздела с элементами подменю, требующий 8 строк интервала

    <input id="Medication" name="radio" type="radio">
    <label for="Medication">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png">
    <span>Medication</span>
    <div class="lil_arrow"></div>
    <div class="bar"></div>
    <div class="swanky_wrapper__content">
    <ul>
    <li>Add Medication</li> 
    <li>View Medication</li> 
    <li>Medication History</li> 
    <li>Immunization</li> 
    <li>Illness Information</li> 
    <li>Files</li> 
    <li>Allergy</li> 
    <li>Procedure</li> 
    </ul>
    </div>
    </label>

и так далее.

Просто подумал при наборе этого, возможно, можно передать ожидаемое количество строк из приведенного выше кода HTML обратно в CSS, чтобы дать ему количество строк, чтобы создать интервал для ? Вместо того, чтобы встраивать его в CSS напрямую?

Спасибо