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

Ответ 1

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});
}

Ответ 2

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

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

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

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

Ответ 3

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

Ответ 4

IF, вы знаете ширину контейнера, вы можете сделать следующее:

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

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

Ответ 5

Извините за восстановление старого потока - растяжка компаса с: после того, как псевдоселектор может соответствовать вашей цели - например. если вы хотите, чтобы 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 пикселей.

Ответ 6

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

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