Compass/Sassコンパイルに問題があります - 私はBones Wordpressのテーマを使用しています

Question

コンパイルするためのCompass/Sass関数が正しくありません。

error library/scss/mixins.scss (Line 302: Invalid CSS after "...: $font-base) {": expected "}", was "   @if $targe...") 

私はおそらくそれをめちゃくちゃ@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の風景など）に対応するウェブサイトを構築しようとしています。とにかく、サイズ（481up、768upなど） 。

「すべての機能は、ルート・レベルで定義されなければならない」私は私の768upスタイルシートで自分のセマンティックグリッドシステムを含むしようとしていたし、それは私にエラーを与えた。私はに768upスタイルシートをインポートしたので、それがあります@mixinsや@functionsをインポートしたスタイルシートで使用したときに壊れるメインのstyles.scss 768up自体に@mixinsを含めようとすると同じ問題が発生します。インポートされるスタイルシートに@mixinsを定義しないでください。

解決策!!!

@mediaクエリ（481up、768up）ですべての異なるサイズのスタイルシートを呼び出しているstyle.scssにセマンティックグリッド "grid.scss"を含めると、これらの個体で@mixinsを使用できるようになりますスタイルシート。

さらに、@mixinsは実際に使用しない限り、cssのスペースを占有しません。したがって、あなたは "grid.scss"ファイルに10,000個の変数、関数、およびミックスインを持つことができ、それらを使用しない限りスタイルシートを膨らませません。

スケッチを含めようとしましたが、うまくいきませんでした。スケッチを見たい場合はこれについてコメントしてください。

これは、仲間の開発者にとって有益なことだと思います。そうでなければ、私は多くのことを確かに学んだ！