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

Question

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

Я хочу быть в состоянии сделать следующее:

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

656 5

sass

5 ответов:

Comments

Ничего не найдено.

chrisgonzalez · Accepted Answer · 2016-01-21 19:08:51

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

вы должны использовать calc() вместо. проверьте совместимость браузера на Могу ли я использовать...
.foo {
    height: -webkit-calc(25% - 5px);
    height:    -moz-calc(25% - 5px);
    height:         calc(25% - 5px);
}
Если ваши значения находятся в переменных, вам может потребоваться использовать интерполяцию, чтобы превратить их в строки (в противном случае Sass просто пытается выполните арифметику):
$a: 25%;
$b: 5px;

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

sandstrom · Accepted Answer · 2014-12-07 02:21:55

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

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

вы можете заставить его с помощью unquote, функция SCSS.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }

Edwin Fernando Marroquin Busto · Accepted Answer · 2015-08-16 05:41:39

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

Design by Adrian · Accepted Answer · 2013-07-31 23:02:49

Если вы знаете ширину контейнера, вы могли бы сделать так:
#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px
Я знаю, что во многих случаях #контейнер может иметь относительную ширину. Тогда это не сработает.

Bryce Gilhome · Accepted Answer · 2013-09-01 18:51:29

извините за возрождение старой нити - компас' стрейч с: после псевдо-селектор может удовлетворить вашу цель-например. если вы хотите, чтобы div заполнял ширину слева (50% + 10px) экрана, вы можете использовать (в синтаксисе с отступом SASS):
.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue
The: после того, как элемент заполняет 50% справа .пример (оставляя 50% доступным для .ширина примера), то .пример растягивается на эту ширину плюс 10px.