0

sass ファイルにエラーがあり、何が機能していないのかわかりません...

これが私が電話から受け取るメッセージです.class{ col(6);

error scss/components.scss (Line 18: Invalid CSS after "...gin:7px 0; col": expected "{", was "(6);")

関数を作成するために使用される関数と変数は次のとおりです (少し混乱している場合は申し訳ありません)。

$columnWidth:40;
$numberOfColumns:16;
$gutterWidth: 20;

$fullWidth:($columnWidth * $numberOfColumns) +  ($gutterWidth * $numberOfColumns); 

@function perc($target) {
  @return (($target / $fullWidth) * 100%);
}

@function gw($n, $fluid: false) {
  $calculatedValue: ($n * $columnWidth + ($n - 1) * $gutterWidth);
  @if $fluid == false {  
    @return $calculatedValue + px;  
  } @else { 
    @return perc($calculatedValue);
  }
}

@function col($n, $fluid: false){  
  @return unquote("width: gw($n, $fluid);");
}

私がやろうとしているのは、gw()関数を再利用することだけです.cssでそれを使用して、幅のcssプロパティとして列数を出力grid(4);できますwidth: 200px;。

関数 gw はグリッド css を適切に生成するため機能しますが、どこでも使用できるグローバル関数を定義したいと考えています。したがって、col()関数。

4

2 に答える 2

-1

関数は、単純型 (文字列、色、数値など) または単純型のリストを返すためにのみ使用できます。プロパティ/値を返すために使用することはできません (例: "color: red"): これを行ったときに取得できるのは、文字列または文字列のリストだけです (文字列はこの方法では使用できません)。文字列のリストをいじくり回した方が、単純に mixin を使用するよりも手間がかかります。

@function foo() {
    @return color red;
}

.foo {
    $kv: foo();
    #{nth($foo, 1)}: #{nth($foo, 2)}
}

比較:

@mixin foo() {
    color: red;
}

.foo {
    @include foo;
}

関数には本質的に再利用gw()できないものはありません (実際、夢に見た不可能な関数よりも再利用可能です)。どのプロパティにも使用できる数値を返します。実際、文字列のリストを返す mixin または関数の代わりに使用することは、探しているものを処理する最も効率的な方法です。

.foo {
    width: gw(1);
}
于 2013-06-27T11:17:30.563 に答える