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 回答