SASS：宽度：100％ - 20px - 可能吗？

Question

我在我的许多项目中使用填充，如果我可以从宽度中减去填充，那么它是否会很方便呢？

如果：

width:100%; 

和

padding: 20px; 

=

100% - 40px ?  

Answer 1

您可以使用box-sizing: border-box将padding计为width的一部分。

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

以下是一个快速演示：http://jsfiddle.net/thirtydot/DNs2u/

更多信息：

• http://caniuse.com/css3-boxsizing
• http://www.w3.org/TR/css3-ui/#box-sizing0
• https://developer.mozilla.org/en/CSS/box-sizing

Answer 2

width: calc(100% - 40px);

更多calc（）使用： CSS Tricks: A Couple of Use Cases for Calc()

Answer 3

不幸的是，没有。由于SASS在服务器上编译为直接CSS，而CSS由客户端呈现，因此无法通过SASS获得该效果。换句话说，直到浏览器解释CSS你知道100％是什么，并且在SASS有机会编译之后很久。

如果您需要知道像素级服务器端的块元素的内部宽度，在页面呈现之前，实际上唯一的方法是使用固定宽度的布局。很多网站都是这样做的 - 比如这个 - 所以我会把它作为一种选择。

Answer 4

使用sass

是不可能的

使用javascript可以实现这些目标。

$('#element').width($(window).width() - 40)