Переменные Sass в функции calc() CSS

Чтобы использовать переменные $variables в функции calc() для любого свойства SCSS, вы можете сделать это следующим образом:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

В данном примере переменная $a имеет значение 4em, и мы можем использовать её внутри функции calc() с помощью синтаксиса интерполяции #{}. Это позволяет динамически комбинировать значения переменных с обычными единицами измерения, такими как px, когда вы задаёте стили для вашего элемента.

Хотя это и не совсем напрямую связано, но я заметил, что код CALC не будет работать, если вы неправильно расставите пробелы.

Например, у меня не заработало выражение calc(#{$a}+7px), тогда как с пробелами, как в calc(#{$a} + 7px), все сработало.

Мне потребовалось время, чтобы это выяснить.

Я попробовал это, и теперь моя проблема решена. Этот код автоматически рассчитывает все медиазначения на основе заданного параметра (base-size/rate-size):

$base-size: 16;
$rate-size-xl: 24;

// Устанавливаем размер по умолчанию для всех случаев;
:root {
  --size: #{$base-size};
}

// Если размер меньше, чем LG, устанавливается размерный коэффициент 16/16;
// Пример: если размер установлен на 14px, он будет 14px * 16 / 16 = 14px
@include media-breakpoint-down(lg) {
  :root {
    --size: #{$base-size};
  }
}

// Если размер больше, чем XL, устанавливается размерный коэффициент 24/16;
// Пример: если размер установлен на 14px, он будет 14px * 24 / 16 = 21px
@include media-breakpoint-up(xl) {
  :root {
    --size: #{$rate-size-xl};
  }
}

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

Таким образом, данное решение позволяет динамически изменять размеры в зависимости от медиазапросов, адаптируя масштабирование под разные размеры экрана. Настройка размера через CSS-переменные делает его более гибким и управляемым.

Вот действительно простое решение с использованием SASS/SCSS и математической формулы:

/* рамка круга */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* сектора круга */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
}

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

В заключение, я настоятельно рекомендую вам разобраться с transform-origin, rotate() и skew():

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/