2016-05-31 3 views
0

omega()機能には奇妙な問題がありましたので、source codeを調べて、nth()機能の使用を見ました。 SassMeister I see that all Sass engines produce the same weird outputnthを試した後ユニット番号のないユニットでSassが番号を追加しないようにする

.foo { 
    content: nth(5n + 3, 1); 
} 

input.scssは

.foo { 
    content: 8n; 
} 
012 output.css

を生成します

ご覧のとおり、私の表現には奇妙な「数学」があります。 Sassが2つの要素を結合しようとしているかのように見えますが、数学的には意味がありません。

これは私が4n+4の疑似セレクタ(...すべての4,8,12に適用され、その後、最初の4をスキップ)を作成するために@include omega(4n+4)を期待するとして、この機能を使用してミックスインするためのいくつかの悪い結果を持っていますが、それ代わりに8nを作成します(8番目の要素ごとに適用)。

なぜこれがそうであるべきか、これが仕様になった初期のバグである理由がありますか?それは避けることができますか?

+0

何が起こりそうですか? 'nth'メソッドはリストから特定の項目を返すことになっています。 –

+0

はい、最初の要素として '5n + 3'を返します。 – oligofren

+0

たとえば、 'nth(1 2n + 1 3、2);'はリストの2番目の要素、 '2n + 1'を返すように要求しています。そしてそれはそれを行いますが、その過程でそれを '3n'に変換します。 – oligofren

答えて

0

私の元の投稿には2つの質問がありますが、これはの2番目のの回答です(Sassの表現方法の回避方法)。初心者のための追加の回答を投稿してください(Sassがなぜ計算を行うのか)。

私が基本的に達成したいのは、Sassが表現を普通のCSSにそのまま渡される文字列として扱うことです。式を引用符で囲むことは解決策ではありませんが、Sassには引用符で囲まれていない2つの文字列があります。

同僚はどのよう3n + 2の引用符で囲まれていない文字列を作成するために、私を示した:

#{3n} + #{2} 

これは、3つの文字列を作成:3n+2、その後、一つに連結されています。したがって、問題のコードの最終的な解決策は次のとおりです。

.foo { 
    content: nth(#{5n} + #{3}, 1); 
} 
関連する問題