Как я могу повторить набор правил как в запросе @media, так и в конкатенации селекторов вне запроса @media?

Question

Веб-странице, которую я создаю, требуются большие элементы пользовательского интерфейса на сенсорных устройствах - но я также хочу позволить пользователям выбирать более крупные элементы пользовательского интерфейса, установив флажок - поэтому мои правила стиля, которые увеличивают элементы ввода, появляются дважды: сначала в блок @media (pointer: coarse) и снова в главном разделе, но с селектором с префиксом :checked.

Вскоре я буду конвертировать все таблицы стилей сайта в SASS, и мне было интересно, есть ли метод в SASS, чтобы SASS создавал выходные данные из одного исходного объявления. Я искал в Google варианты «sass дубликата медиа-запроса правил» - но все результаты поиска касаются , препятствующего SASS создавать ненужные дубликаты @media запросов, а это не то, что мне нужно (они тоже не охватывает префикс селекторов правил с моим #touchFriendly:checked ~ * селектором).

Я знаю, что у SASS есть собственный API - который, я полагаю, я мог бы использовать, если я хочу настроить JavaScript систему сборки _(ugggghhh) - но возможно ли, не заходя так далеко? (FWIW сейчас я использую T4 для создания этих дублирующих стилей).

label {
    display: block;
}

#touchFriendly:not(:checked) ~ * #touchFriendlyLabel {
    background-color: #eee;
    border: 1px outset #999;
}
#touchFriendly:checked ~ * #touchFriendlyLabel {
    background-color: #ddd;
    border: 1px inset #999;
}

@media (pointer: coarse), (pointer: none) {

    #touchFriendlyLabel { display: none; }

    /* BEGIN: The rules below need to be repeated outside the @media block with `#touchFriendly:checked ~ ` prefixed to the selector: */

    .mySection {
        font-size: 120%;
    }

    select, textarea { font-size: 140%; }

    .mySection input[type=checkbox],
    .mySection input[type=radio] {
        width: 64px;
        height: 64px;
    }

    /* END */
}

/* BEGIN: The rules from the @media query above are repeated below, but with the :checked prefix: */

#touchFriendly:checked ~ .mySection {
    font-size: 120%;
}

#touchFriendly:checked ~ .mySection select,
#touchFriendly:checked ~ .mySection textarea {
    font-size: 140%;
}

#touchFriendly:checked ~ .mySection input[type=checkbox],
#touchFriendly:checked ~ .mySection input[type=radio] {
    width: 64px;
    height: 64px;
}

/* END */

<input type="checkbox" id="touchFriendly" style="display: none;" />
<section>
    
    <label for="touchFriendly" id="touchFriendlyLabel">
        Click here for touch-friendly mode
    </label>
    
    <br />

</section>

<section class="mySection">

    <!-- etc -->

    <label>
        <input type="checkbox" />
        Checkbox
    </label>

    <label>
        <input type="radio" name="a" checked="checked" />
        Radio 1
    </label>

    <label>
        <input type="radio" name="a" />
        Radio 2
    </label> 

    <label>
        <input type="radio" name="a" />
        Radio 3
    </label>

    <label>
        <select>
            <option></option>
            <option>Chonky boi</option>
            <option>Oh lawd he comin</option>
        </select>
    </label>

</section>