Question

我希望能够做到以下几点：

height: 25% - 5px;

显然，当我这样做时，我收到错误：

Incompatible units: 'px' and '%'.

Answer 1

Sass无法对无法从一个单元转换到下一个单元的值执行算术运算。 Sass无法确切地知道“100％”在像素或任何其他单位方面有多宽。这只是浏览器知道的事情。

您需要使用calc()代替。 Check browser compatibility on Can I use...

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

Answer 2

SCSS [编译时]和CSS [运行时]都有calc函数。你可能会调用前者而不是后者。

由于显而易见的原因，混合单元不能在编译时运行，但会在运行时运行。

您可以使用SCSS函数unquote来强制执行后者。

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

Answer 3

var list = db.UserHits
             .GroupBy(x => x.UtcTimeStamp.Day               // work around because 
                         + x.UtcTimeStamp.Month * 100       // EF does not 
                         + x.UtcTimeStamp.Year * 100 * 100) // support .Date property
             .GroupBy(x => x.FirstOrDefault().UserGuid)
             .ToDictionary(x => x.FirstOrDefault()
                                 .FirstOrDefault()
                                 .UtcTimeStamp.Date, 
                           x => Tuple.Create(x.Count(), x.Sum(y => y.Count())));

Answer 4

IF 你知道容器的宽度，你可以这样做：

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

我知道在很多情况下#container可能有相对宽度。然后这不起作用。

Answer 5

很抱歉恢复旧线程 - Compass'延伸使用：在伪选择器之后可能适合您的目的 - 例如。如果你想要一个div来填充从左边到（50％+ 10px）屏幕的宽度你可以使用（在SASS缩进语法中）：

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

：after元素填充.example右侧50％（剩下50％可用于.example的宽度），然后.example被拉伸到该宽度加上10px。

Answer 6

只需将百分比值添加到变量中并使用#{$variable} 例如

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

Sass计算百分比减去px

6 个答案: