Sass вычисляет процент минус пиксель

134

Я хочу иметь возможность:

height: 25% - 5px;

Очевидно, когда я это делаю, я получаю сообщение об ошибке: 

Incompatible units: 'px' and '%'.
sass Майк Филден
источник
Я получаю Invalid property valueошибку. В каждом браузере, включая сборку Chrome Canary.
Майк Филден,
Если есть функция Sass, которая даст мне то, что я хочу, это круто, я просто играл с calc...
Майк Филден,
Да :) Как я уже сказал, меня не волнует, как это будет сделано, когда calcя пошел первым, а это не сработало. Похоже, что calcне работает ни в одном из моих браузеров, поэтому лучше всего было бы реализовать sass.
Майк Филден,
1
Sass не может действовать как полифил для calc (). Он не знает, как преобразовать 25% в пиксели, чтобы выполнять вычисления и генерировать CSS. В зависимости от ваших конкретных потребностей может быть альтернатива, такая как использование семейства display-table, изменение размера вашего бокса или использование отрицательных полей ( jsfiddle.net/5JZGt )
cimmanon

Ответы:

240

Sass не может выполнять арифметические операции со значениями, которые нельзя преобразовать из одной единицы в другую. У Sass нет способа точно узнать, насколько широк «100%» в пикселях или любых других единицах измерения. Об этом знает только браузер.

calc()Вместо этого вам нужно использовать . Проверьте совместимость браузера на Могу ли я использовать ...

.foo {
    height: calc(25% - 5px);
}

Если ваши значения находятся в переменных, вам может потребоваться использовать интерполяцию, чтобы превратить их в строки (иначе Sass просто попытается выполнить арифметику):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}
chrisgonzalez
источник
5
Я бы сказал, что calc () вообще не работает в большинстве браузеров. Мобильные платформы так же важны, как и настольные компьютеры.
dalgard 07
3
Нет аргументов, но считайте браузеры! Больше поддержки calc (), чем нет, и даже больше будет поддерживать ее в ближайшем будущем!
chrisgonzalez
5
Я имел проблемы ширины , используя переменную внутри функции известково, но здесь: stackoverflow.com/questions/13542164/... , что я мог бы ссылаться на переменную , как это: calc(25% - #{$var}).
mlunoe
В продолжение заявления @dalgard, с точки зрения существующих, выпущенных браузеров, calc работает не больше, чем работает. См .: caniuse.com/#search=calc
imjared
3
Вы всегда можете использовать width: 22%widthcalc
запасной
23

Есть calcфункция как в SCSS [время компиляции], так и в CSS [время выполнения]. Скорее всего, вы используете первое вместо второго.

По очевидным причинам модули микширования не будут работать во время компиляции, но будут работать во время выполнения.

Вы можете форсировать последнее, используя unquoteфункцию SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }
Сандстр
источник
14 
$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}
Эдвин Фернандо Маррокин Бусто
источник
2
Спасибо, что разместили ответ на этот вопрос! Ответы только на код не приветствуются в Stack Overflow, потому что дамп кода без контекста не объясняет, как и почему решение будет работать, что затрудняет понимание исходной статьи (или любых будущих читателей) логики, стоящей за ним. Пожалуйста, отредактируйте свой вопрос и включите объяснение своего кода, чтобы другие могли извлечь пользу из вашего ответа. Спасибо!
Максимиллиан Лаумейстер
Это меня спасло. width: unquote ("calc (100% - # {$ leftnav-width})");
httpete
5

ЕСЛИ вы знаете ширину контейнера, вы можете сделать так:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Я знаю, что во многих случаях #container может иметь относительную ширину. Тогда это не сработает.

Дизайн Адриана
источник
2

Извините за возрождение старой темы - растяжка Компаса с псевдоселектором: after может соответствовать вашим целям - например. если вы хотите, чтобы div заполнял ширину слева до (50% + 10 пикселей) экрана, вы можете использовать (в синтаксисе с отступом SASS):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

Элемент: after заполняет 50% справа от .example (оставляя 50% доступным для ширины .example), затем .example растягивается до этой ширины плюс 10 пикселей.

Брайс Гилхоум
источник
1
есть ли где-нибудь для этого менее или дерзкое сведение? calc работает не очень хорошо.
v3nt
0

Просто добавьте процентное значение в переменную и используйте, #{$variable} например,

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}
Афтаб Ахмед
источник