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

Question

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

使用 A List Apart of 中的公式target/context=result，其中上下文为 980 像素，设计宽度为 640 像素，我尝试执行以下规则

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

编译为

#leftcol {
  width: 65.306%;
}

有没有比不一遍又一遍地输入更简单的方法？

Answer 1

不需要混合。Sass 有一个内置的百分比函数，可以接受多种单位。

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

两者都导致：

width: 65.30612%

Answer 2

我想通了，我做了一个mixin：

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