SASS: Зависимая от @media правил переменная

SASS и CSS не позволяют использовать переменные, зависящие от `@media` внутри самого языка, так как переменные в SASS компилируются в CSS до того, как браузер применяет медиазапросы. Но можно обойти это ограничение с помощью миксинов и генерировать медиазапросы динамически.

Вот пример того, как можно реализовать вашу идею с помощью миксинов:

 // Переменные для экранов 
$--screen-sm: 576px; 
$--screen-md: 768px; 
$--screen-lg: 992px; 
$--screen-xl: 1200px; 
$--screen-xxl: 1400px; 
 
// Переменные для размеров padding 
$--screen-padding-size-xs: 8px; 
$--screen-padding-size-sm: 16px; 
$--screen-padding-size-md: 24px; 
$--screen-padding-size-lg: 32px; 
$--screen-padding-size-xl: 40px; 
$--screen-padding-size-xxl: 48px; 
 
// Миксин для установки значения переменной в зависимости от @media 
@mixin screen-padding-size { 
    // Начальное значение 
    --screen-padding-size: #{$--screen-padding-size-xs}; 
 
    // Медиазапросы 
    @media (min-width: $--screen-sm) and (max-width: calc(#{$--screen-md} - 1px)) { 
        --screen-padding-size: #{$--screen-padding-size-sm}; 
    } 
    @media (min-width: $--screen-md) and (max-width: calc(#{$--screen-lg} - 1px)) { 
        --screen-padding-size: #{$--screen-padding-size-md}; 
    } 
    @media (min-width: $--screen-lg) and (max-width: calc(#{$--screen-xl} - 1px)) { 
        --screen-padding-size: #{$--screen-padding-size-lg}; 
    } 
    @media (min-width: $--screen-xl) and (max-width: calc(#{$--screen-xxl} - 1px)) { 
        --screen-padding-size: #{$--screen-padding-size-xl}; 
    } 
    @media (min-width: $--screen-xxl) { 
        --screen-padding-size: #{$--screen-padding-size-xxl}; 
    } 
} 
 
// Пример использования 
body { 
    @include screen-padding-size; 
 
    // Применение значения переменной 
    padding: var(--screen-padding-size); 
} 
 

### Как это работает:
1. **Миксин**: `@mixin screen-padding-size` генерирует медиазапросы и устанавливает кастомное свойство `--screen-padding-size` в зависимости от ширины экрана.
2. **CSS-переменные**: Кастомное свойство `--screen-padding-size` доступно в чистом CSS, и вы можете использовать его через `var(--screen-padding-size)` в любых правилах стилей.
3. **Преимущество**: Такой подход позволяет избежать необходимости дублировать код в SASS и одновременно сохранять возможность динамического изменения значения в зависимости от ширины экрана.

### Итог:
Переменная `--screen-padding-size` теперь зависит от `@media`, а её значение можно использовать в CSS через `var()` без необходимости генерировать отдельную функцию в SASS.