SASS Calc Интерполяция

Question

У меня есть переменная SASS:

$default-padding: 15px 

Я хочу, чтобы использовать эту функцию, чтобы установить свойство ширины CSS, используя функцию выч.

У меня есть различные расчеты, сделанные на основе значения переменной $ default-padding. Например, ширина будет 100% - (2 * $ default-padding). Поскольку есть прокладка слева и справа.

Я пытаюсь установить локальную переменную (используя метод стрип-блок бурбона в):

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px; 

Я бы ожидать, что результатом этой переменной будет 30px в этом прецеденте, и я хочу использовать его в следующем правиле:

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

Это не работает, в результате CSS является:

.popup { 
    width: calc(100% - strip-unit(15px)px); 
} 

Какие идеи я делаю неправильно?

Answer 1

две вещи:

1. , кажется, как функция полосы блока не найдена (почему имя функции печатается out)
2. Вы не должны интерполировать $ default-padding-left-and-right (он превращает значение переменной в строку) - используйте вместо этого умножение.

Пример:

@function strip-unit($num) { @return $num/($num * 0 + 1); } 

$default-padding: 15px; 
$default-padding-left-and-right: strip-unit($default-padding) * 2px; 

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

Выход:

.popup { 
    width: calc(100% - 30px); 
} 

Answer 2

Функция Бурбон strip-units не strip-unit - изменение это должно решить ваш вопрос