Как вставить % в миксинах scss

Question

Как вставить % в миксинах scss

Рейтинг: 0Ответов: 1Опубликовано: 07.03.2023

Не получается вставить % в миксины scss, могу вставит единицы em, rem, а % не знаю как.

Искал информацию, но не нашел, пробовал через #{} не получается`

@mixin adp($property, $max, $min, $container: $container, $minWidth: 320) {
    $container: $container;
    $minWidth: $minWidth;

    @media (max-width: #{$container / 16 + em}) {
        #{$property}: calc(#{$min / 16 + %} + (#{$max} - (#{$min})) * ((100vw - #{$minWidth + px}) / (#{$container} - #{$minWidth})));
 }

`

css javascript html gulp scss

Источник: Stack Overflow на русском

Answer 1

▲ 0

Проблем вынести за #{} нет никаких. Вот так:

@mixin adp($property, $max, $min, $container: $container, $minWidth: 320) {
   $container: $container;
   $minWidth: $minWidth;

   @media (max-width: #{$container / 16}em) {
       #{$property}: calc(#{$min / 16}% + (#{$max} - #{$min}) * ((100vw - #{$minWidth + px}) / (#{$container}px - #{$minWidth}px)));
   }
}

Вы также можете использовать проценты как строку – это будет работать:

@mixin adp($property, $max, $min, $container: $container, $minWidth: 320) {
   $container: $container;
   $minWidth: $minWidth;

   @media (max-width: #{$container / 16 + em}) {
       #{$property}: calc(#{$min / 16 + '%'} + (#{$max} - (#{$min})) * ((100vw - #{$minWidth + px}) / (#{$container} - #{$minWidth})));
   }
}

P.S. Но учитывайте, что у Вас получается невалидное выражение с точки зрения CSS в принципе.

Как вставить % в миксинах scss

Ответы