使用Compass / sass进行百分比宽度响应布局？

Question

我正在尝试使用Sass（和Compass）来简化百分比宽度布局的创建。

使用A List除target/context=result之外的公式，其中上下文为980px且设计宽度为640px，我尝试了

的规则

#leftcol {
width: ((640/980)*100%);
}

编译为

#leftcol {
  width: 65.306%;
}

如果没有反复输入，是否有更简单的方法呢？

Answer 1

不需要mixin。 Sass具有内置百分比功能，可接受各种单元。

width: percentage(640 / 980)
width: percentage(640px / 980px)

两者都导致：

width: 65.30612%

Answer 2

我想通了，我做了一个混音：

@mixin flex($target, $context){
width: (($target/$context)*100%);
}

然后使用它

#leftcol {
@include flex(640, 980);
}

Answer 3

sass还允许函数定义（因此您可以使用例如w / min-width和宽度，或作为其他子表达式的一部分）：

@function flex-width($target, $context) {
    @return (($target/$context)*100%);
}

#leftcol {
    width: flex-width(640, 980);
}