如何在Compass Mixin中正确添加百分比单位解决编译错误？

嘿，这个问题我之前也碰到过！你出错的原因是Sass不允许直接用+ %这种方式给数值加百分比单位——它会把单独的%当成无效表达式，所以才会抛出那个语法错误。

要解决这个问题，有几种简单的方法，取决于你的$content-block变量的定义方式：

方法1：用Sass内置的percentage()函数（适合小数比例值） #

如果$content-block是小数形式的比例（比如你要得到10%，变量值是0.1），直接用percentage()函数转换最稳妥：

@include breakpoint(sm) { 
  padding-left: percentage($content-block); 
  padding-right: percentage($content-block); 
}

这个函数会自动把小数转换成对应的百分比，比如0.1 → 10%，完全符合你的预期。

方法2：给数值乘以1%（适合整数值） #

如果$content-block是整数（比如你要10%的话，变量值是10），直接用变量乘以1%就能得到正确的百分比单位：

@include breakpoint(sm) { 
  padding-left: $content-block * 1%; 
  padding-right: $content-block * 1%; 
}

这里的逻辑很简单：10 * 1% = 10%，Sass能正确解析这种单位运算。

方法3：直接定义带单位的变量（最省心） #

如果你的$content-block从一开始就定义为10%，那直接用变量就行，不需要额外计算：

$content-block: 10%;

@include breakpoint(sm) { 
  padding-left: $content-block; 
  padding-right: $content-block; 
}

总的来说，Sass的单位运算要遵循它的语法规则，不能像拼接字符串那样加单位。上面三种方法都能解决你的错误，并且得到你想要的10%结果，选哪种就看你的变量是怎么定义的啦～

内容的提问来源于stack exchange，提问作者Yannick Jean-Noel