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

1347

Я пытаюсь использовать calc()функцию в таблице стилей Sass, но у меня есть некоторые проблемы. Вот мой код:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

Если я использую литерал 50pxвместо своей body_paddingпеременной, я получаю именно то, что хочу. Однако, когда я переключаюсь на переменную, это вывод:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

Как я могу заставить Sass признать, что ему нужно заменить переменную внутри calcфункции?

GJK
источник
10
возможный дубликат переменной США в
Mixin
19
@ user3705055 Вам нужно рассчитать, поскольку Sass не может рассчитать 100% - 50px, поскольку единицы измерения разные. Это может быть вычислено только браузером, когда он знает, насколько велик контейнер, чтобы преобразовать 100% в px перед добавлением значений. Это точная причина, почему существует Calc.
Mog0

Ответы:

2545

Интерполировать :

body
    height: calc(100% - #{$body_padding})

Для этого случая также будет достаточно границы :

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding
Сэм
источник
3
box-sizing: border-box;было бы идеальным способом пойти, на мой взгляд, конечно. В общем, модель для определения размеров коробки должна составить т
Brandito
Большое спасибо! Я собирался пойти по маршруту csscalc(100% - var(--body_padding))
Sylar
51

Чтобы использовать $variablesвнутри вашего calc()свойства высоты:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}
Жоао да сильва марли
источник
11
Что это добавляет к принятому ответу почти 5 лет назад?
random_user_name
6
По некоторым причинам я нахожу этот ответ более ясным. Я не много работаю с scss, так что это было "проще" и мне было легче понять.
2b77bee6-5445-4c77-b1eb-4df3e5
4
Это, безусловно, более четкий ответ, чем принятый. «Интерполировать:» для меня ничего не значит.
Жак Матье
3
@JacquesMathieu sass-lang.com/documentation/interpolation - Если это ничего не значит для вас и это ответ с таким большим количеством голосов, вероятно, вы должны понять, о чем идет речь. Только мои два цента ...
А. Кьеза
1
@A. Кьеза уверена, что определяет интерполяцию. Однако мы с ОП не знали об интерполяции в SASS, иначе этот вопрос никогда бы не был задан. Таким образом, простое изложение слова, которое никто, возможно, никогда не слышал раньше, без определения или какого-либо притворства, не помогает в создании всеобъемлющего ответа. Эта ссылка, безусловно, полезна. Было бы приятно увидеть это на принятом ответе.
Жак Матье
9

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

Так что это не сработало для меня calc(#{$a}+7px)

Но это сработало calc(#{$a} + 7px)

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

Udit
источник
2

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


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

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 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);
}
Серкан КОНАКЧИ
источник
0

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

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.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/

Карл Л.Д.
источник
-2

Вы можете использовать свой словесный #{your verbal}

Girraj
источник
3
Это кажется странным ответом. Я предполагаю, что вы имеете в виду, variableно учитывая, что ОП знает, что такое переменная (они указывают $body_paddingв своем коде), что добавляет ваш ответ?
Майк Пул
У меня есть ответ
Girraj
-6

Попробуй это:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}
Mas Hary
источник
3
Как это лучше, чем принятый ответ выше? Кажется, он даже не делает то же самое ...?
Жюль