web-dev-qa-db-ja.com

Sassの画像パスに変数がありますか？

CSSファイル内のすべての画像へのルートパスを含む1つの変数が必要です。これが純粋なSassで可能かどうかはよくわかりません（実際のWebプロジェクトはRoRではないため、asset_pipelineやそのようなジャズは使用できません）。

動作しない私の例を次に示します。コンパイル時に、バックグラウンド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%; }

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

csssass
108
program247365

Interpolation 構文を試しましたか？

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

機能は必要ありません：

$assetPath : "/assets/images";

...

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

詳細については、 補間ドキュメント を参照してください。

85
steveax

同じ質問の答えを探していましたが、より良い解決策を見つけたと思います： http://blog.grayghostvisuals.com/compass/image-url/

基本的に、config.rbでイメージパスを設定し、image-url（）ヘルパーを使用できます

6
NerdCowboy

上記の正解に何かを追加します。 netbeans IDEを使用していますが、このメソッドでurl(#{$assetPath}/site/background.jpg)を使用するとエラーが表示されます。これは単なるnetbeansエラーであり、sassコンパイルではエラーではありませんでした。しかし、このエラーはNetBeansとコードのコードフォーマットを壊し、見苦しくなります。しかし、以下のような引用符内で使用すると、驚異を示します！

url("#{$assetPath}/site/background.jpg")

0
Pons Purushothaman