Sass обчислюють відсотки мінус px

133

Я хочу вміти робити наступне:

height: 25% - 5px;

Очевидно, коли я це роблю, я отримую помилку:

Incompatible units: 'px' and '%'.

sass

— Майк Філден
джерело

Я отримую Invalid property valueпомилку. У кожному веб-переглядачі, включаючи збірку Canary Chrome.

— Майк Філден

Якщо є функція Sass, яка отримає мені те, що я хочу, це здорово, я просто грав з calc...

— Майком Філден

Так :) Як я сказав, мені все одно, як це робиться calc, якщо я пішов першим, і це не працювало. Схоже, це calcне працює в будь-якому моєму браузері, тому найкраще я б здогадався про реалізацію sass.

— Майк Філден

1

Sass не може виконувати роль поліфункції для calc (). Він не знає, як конвертувати 25% у px, щоб він міг робити математику та генерувати CSS. Залежно від ваших точних потреб, може бути альтернатива, наприклад, використання сімейства таблиць дисплеїв, зміна розміру коробки або використання негативних націнок ( jsfiddle.net/5JZGt )

— cimmanon

239

Sass не може виконувати арифметику на значеннях, які неможливо перетворити з однієї одиниці на іншу. Sass не може точно знати, наскільки широкий "100%" у відношенні пікселів чи будь-якого іншого пристрою. Це те, що лише браузер знає.

Вам потрібно використовувати calc()замість цього. Перевірити сумісність браузера на Чи можу я використовувати ...

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

Якщо ваші значення знаходяться в змінних, можливо, вам доведеться використовувати інтерполяцію, щоб перетворити їх у рядки (інакше Sass просто намагається виконати арифметику):

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

.foo {
  width: calc(#{$a} - #{$b});
}

— chrisgonzalez
джерело

5

Я б сказав, що calc () зовсім не працює в більшості браузерів. Мобільні платформи так само важливі, як і настільні.

— далгард

3

Ніяких аргументів немає, але порахуйте браузери! Більше підтримка calc (), ніж ні, і ще більше підтримає його найближчим часом!

— chrisgonzalez

5

Я мав проблеми ширини , використовуючи змінну всередині функції вапняно, але тут: stackoverflow.com/questions/13542164 / ... , що я міг би посилатися на змінну , як це: calc(25% - #{$var}).

— mlunoe

Для того, щоб стежити за @ заяву Dalgard в, з точки зору існуючих, випущеному браузерів, вапняно не працює в більш ніж працює Дивіться :. Caniuse.com/#search=calc

— imjared

3

Ви завжди можете скористатися опцією відкидання, додавши, width: 22%перш за все, widthсcalc

— Hengjie

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

Дякуємо, що опублікували відповідь на це запитання! Відповіді, що стосуються лише коду, відмовляються від переповнення стека, оскільки дамп коду без контексту не пояснює, як і чому це рішення буде працювати, що ускладнює оригінальному плакату (або будь-яким майбутнім читачам) зрозуміти логіку, що стоїть за ним. Відредагуйте своє запитання та додайте пояснення свого коду, щоб інші могли отримати користь від вашої відповіді. Дякую!

— Maximillian Laumeister

Це врятувало мене. width: unquote ("calc (100% - # {$ leftnav-width})");

— httpete

5

Якщо ви знаєте ширину контейнера, ви можете зробити так:

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

Я знаю, що у багатьох випадках #container може мати відносну ширину. Тоді це не спрацювало б.

— Дизайн Адріана
джерело

2

Вибачте за відродження старої нитки - Натягнення компаса з: після псевдоселектора може відповідати вашим цілям - наприклад. якщо ви хочете, щоб div заповнив ширину зліва на (50% + 10 пікселів) екрана, який ви можете використовувати (у синтаксисі з відступом SASS):

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

Елемент: після заповнення 50% праворуч від .example (залишаючи 50% доступним для ширини .example), тоді .example розтягується на цю ширину плюс 10 px.

— Брайс Гілхолм
джерело

1

чи є для цього десь мішання або гасіння? calc, здається, не працює дуже добре.

— v3nt

0

Просто додайте значення відсотка в змінну і використовуйте, #{$variable} наприклад

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}

— Афтаб Ахмед
джерело