0

我无法正确编译一些自定义 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) {} 是导致问题的原因。我不喜欢在函数定义中设置创建变量......不知道为什么？

4

1 回答 1

1

好的，太棒了 - 我让它工作了！

我猜这个答案会帮助所有 Compass/Sass Web 开发人员，所以我决定详细说明一下。

我正在尝试为不同尺寸的设备（iPhone 垂直、iPhone 横向、iPad 垂直、iPad 横向等）构建一个响应式网站。无论如何，我将所有 Sass 样式表分解为它们的尺寸（481up、768up 等）。

我试图在我的 768up 样式表中包含我的语义网格系统，它给了我错误“所有函数必须在根级别定义”。那是因为我将 768up 样式表导入到我的主 style.scss 中，当您在自己导入的样式表中使用 @mixins 和/或 @functions 时，它会中断。如果您尝试在 768up 本身中包含 @mixins，则会出现同样的问题，它会中断，因为您无法在将要导入的样式表中定义 @mixins。

解决方案！！！

将语义网格“grid.scss”包含到您的 style.scss 中，该样式通过 @media 查询（481up、768up）调用所有不同大小的样式表，您将能够在这些单独的样式表中使用 @mixins。

另外，更好的是，除非您实际使用它们，否则 @mixins 不会占用 css 中的任何空间！因此，您的“grid.scss”文件中可能有 10,000 个变量、函数和 mixin，除非您使用它们，否则它们不会使您的样式表膨胀。

我试图包括一个草图，但它没有用。如果您想查看草图，请对此发表评论。

好吧，我希望这对一些开发人员有用。如果没有，我肯定学到了很多！

于 2012-02-22T23:22:07.697 回答