Question

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

Answer 1

好的，太棒了 - 我让它上班了！

我猜这个答案会帮助你所有的Compass / Sass Web Devs，所以我决定详细说明。

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

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

解决方案!!!

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

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

我试图包含草图，但它没有用。如果您想看草图，请对此进行评论。

嗯，我希望这对某些开发人员有用。如果没有，我肯定学到了很多东西!!!

使用Compass / Sass编译时遇到问题 - 我正在使用Bones Wordpress主题

1 个答案: