我正在尝试calc()在Sass样式表中使用该函数,但我遇到了一些问题.这是我的代码:
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
如果我使用文字50px而不是我的body_padding变量,我会得到我想要的.但是,当我切换到变量时,这是输出:
body {
padding-top: 50px;
height: calc(100% - $body_padding); }
我怎样才能让Sass认识到它需要替换calc函数中的变量？
现在我在我的LESS代码中尝试在CSS3中执行此操作:
width: calc(100% - 200px);
但是,当LESS编译时,它输出:
width: calc(-100%);
有没有办法告诉LESS不要以这种方式编译并正常输出？
我正在使用的Less编译器(OrangeBits和dotless 1.3.0.5)正在积极地进行翻译
body { width: calc(100% - 250px - 1.5em); }
成
body { width: calc(-151.5%); }
这显然是不希望的.我想知道是否有办法向Less编译器发出信号,在编译期间基本上忽略该属性.我搜索了Less文档和两个编译器的文档,但我找不到任何东西.
Less或less编译器是否支持此功能？
如果没有,是否有一个CSS扩展器呢？
我试图使用CSS动态更改div的宽度,而不是jquery.以下代码适用于以下浏览器:http://caniuse.com/calc
/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);
我也想支持IE 5.5及更高版本,我发现以下内容:表达式.这是正确的用法:
/* IE-OLD */
width: expression(100% - 500px);
我还可以支持Opera和Android浏览器吗？
有没有办法在less ~运算符中使用变量,比如
~"calc(70% - @spacing)";
当我尝试它时,它只适用于静态值,如
~"calc(70% - 10px)";
我可以在设置为属性之前获取要评估的字符串.
例如,以下内容不起作用(arrow-size作为变量):
arrow-size = 5px
left calc(50% - arrow-size)
从我在其他 答案中看到的,CSS视口单元还不能在calc()语句中使用.我想要实现的是以下声明:
height: calc(100vh - 75vw)
是否有一些解决方法我可以使用纯CSS实现这一点,即使视口单元不能在calc()语句中使用？或者只是CSS和HTML？我知道我可以使用javascript动态地完成它,但我更喜欢CSS.
最近我开始在CSS中使用calc(...)方法.我很快就知道代码如下:width: calc(100%-2)虽然在-操作符之前和之后添加空格来解决问题并且calc方法将正常运行,但是不起作用.
在做了一些研究之后,我发现有多篇博客文章提到白色空间是必需的,许多人甚至指出了规范(CSS3 8.1.1),其中指出:
此外,+和 - 运算符的两侧都需要空格.(*和/操作符可以在没有空格的情况下使用.)
现在,很明显,规范告诉我们这些运算符必须用白色空间包裹,但为什么呢？我已经在规范中进一步阅读(通过第8.1.2-4节),如果在这些附加部分中解释,我不理解推理.
简单来说,有人可以解释为什么指定它calc(100% - 1)甚至calc(100%/2)是可接受的语法但不是calc(100%-1)吗？
@media screen and (max-width: calc(2000px-1px)) {
.col { width: 200px; }
}
减法后的值应该是1999px,但它似乎不起作用.如果我手动将其更改为1999px它工作正常,所以我知道这不是我的CSS的问题.是calc不是媒体查询中支持的,还是我做错了什么？
我想知道我是否可以将calc()函数与attr()函数结合起来,以实现如下所示:
<div class="content" data-x="1">
This box should have a width of 100px
</div>
<div class="content" data-x="2">
This box should have a width of 200px
</div>
<div class="content" data-x="3">
This box should have a width of 300px
</div>
CSS
.content{
//Fallback. If no calc is supported, just leave it at 100px
width: 100px;
}
.content[data-x]{
// Multiply the width of the element by the factor of data-x
width: calc(100px * attr(data-x));
}
该草案说,它应该工作,但对我来说器(Chrome 31.0.1650.63 m和火狐25.0.1),它没有.那么有两种情况:
这是怎么回事？