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

【问题标题】：Using Compass/sass for percentage width responsive layouts?使用 Compass/sass 进行百分比宽度响应式布局？
【发布时间】：2012-06-05 01:30:57
【问题描述】：

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

使用来自target/context=result的A List Apart的公式，其中上下文为980px，设计宽度为640px，我尝试做一个规则

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

编译成

#leftcol {
  width: 65.306%;
}

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

【问题讨论】：

【解决方案1】：

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

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

然后使用它

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

【讨论】：

【解决方案2】：

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

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

两者都导致：

width: 65.30612%

【讨论】：

【解决方案3】：

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

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

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

【讨论】：