2011-12-22 10 views
89

CSSファイル内のすべてのイメージへのルートパスを含む変数を1つ持っています。私はこれが純粋なSassで可能かどうかは分かりません(実際のWebプロジェクトはRoRではないので、asset_pipelineやその素晴らしいジャズを使うことはできません)。Sassの画像パスに変数がありますか?

これは私の例では動作しません。コンパイルすると、背景URLのプロパティの変数の最初のインスタンスが("Invalid CSS after "..site/background": expected ")")となります。

パスを返す関数を定義する:

//Vars 
$assetPath : "/assets/images"; 

//Functions 
@function get-path-to-assets($assetPath){ 
    @return $assetPath; 
} 

の機能を使用する:

body { 
    margin: 0 auto; 
    background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0; 
    width: 100%; } 

任意の助けをいただければ幸いです。

答えて

153

Interpolation構文を試しましたか?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0; 
+0

CssVariablesProcessorはCssDataUriPreProcessorの前にプリプロセッサとして設定されていても変数を処理しないので、私にとっては役に立ちません – Alexey

+8

とても美しいです。 –

+0

また、引用符で囲まれたパスでも動作します。コンパスのfont-face mixinで。 ''#{$ fontName} .ext'、..' – Fleuv

69

機能は必要ない:

$assetPath : "/assets/images"; 

... 

body { 
    margin: 0 auto; 
    background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0; 
    width: 100%; } 

は詳細についてはinterpolation docsを参照してください。

+0

@Madmartiganが最初にそこに着いたように見えるので、私は彼の答えとしてマークしていますが、あなたも正しいです。ありがとう! – program247365

+0

+1補間用の文書にお返事ありがとうございます – Shanimal

+5

変数を直接指して簡潔にすることをお勧めします –

6

は、同じ質問への答えのために周りに検索するが、私はよりよい解決策を見つけたと思うしたhttp://blog.grayghostvisuals.com/compass/image-url/

基本的に、あなたはconfig.rbであなたのイメージのパスを設定することができますし、画像のURLを使用します()ヘルパー