超便利Sassで変数指定してminxinでbackgroundの画像を指定する

カテゴリー︎： 【Sass】

cssのbackgroundイメージのパス指定は、地味にめんどう。。。

なので、sassは変数を使えるということなので、

webサイトのパスを変数化して、

mixinで任意のファイル名を引数として画像指定するやりかた

【scssファイル】

_mixin.scss

// #{'xxx'} は　xxx　をエスケープしている
$sitePath: #{'url(http://faq.tank.jp/images/'};//サイトのパスを定義
 
 
@mixin bgImage($bgImage) {
  background: $sitePath#{$bgImage}#{')'};//mixinで呼び出し元を定義
}

_index.scss

@import "_mixin.scss";//インポートする
 
//拡張子は変更できる　.jpe　.gif
.sample {
  @include bgImage(bg_image#{'.png'});//mixinを呼びだして、任意の引数を渡す
}

コンパイル後の

index.css

.sample {
  background: url(http://faq.tank.jp/images/bg_image.png); }

この設定であれば、追加が簡単！

もちろん、 .jpg .gif に拡張子を変えれば変更できる

さらに

サイトのパスが変わったとしても、

_mixin.scss　の　$sitePath内を変更すれば、全部パスが変更できた！

超便利〜　お試しあれ〜