我无法正确编译一些自定义 Compass/Sass 函数。我不断收到错误:
error library/scss/mixins.scss (Line 302: Invalid CSS after "...: $font-base) {": expected "}", was " @if $targe...")
我在 Stack Exchange 上读到一些关于 @import 可能会搞砸的东西。
这是我的功能:
$columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$max-width: $columns * ($column-width + $gutter-width);
/*********************
Variables - Fonts
*********************/
$font-base: 15px;
$font-base-line-height: 24px;
@function calc-percent($target, $container) {
@return ($target / $container) * 100%;
}
@function em($target, $context: $font-base) {
@if $target == 0 { @return 0 }
@return $target / $context + 0em;
}
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
@function lh($amount: 1, $context: $font-base) {
@return em($font-base-line-height * $amount, $context);
}
@mixin col($n, $padding: 0px, $border: 0px, $container-width: $max-width) {
float: left;
margin-right: percentage($gutter-width / $container-width);
width: percentage(($n * ($column-width + $gutter-width) - $gutter-width - ($padding * 2) - ($border * 2)) / $container-width);
border-width: $border;
padding: em($padding, $font-base) percentage($padding / $container-width);
position: relative;
display: inline;
}
.wrap {
@include col(10);
}
我正在写这个,所以任何帮助将不胜感激 - 如果我自己弄清楚,我会发布答案:)
所以我一直在注释掉部分代码并使用 (container-width: $max-width) {} 是导致问题的原因。我不喜欢在函数定义中设置创建变量......不知道为什么?