img-replace with SASS

Question

私は画像を簡単に操作して置き換えるためにミックスインを作成しましたが、今では私のアプリは成長しており、このコードを改善する方法はわかりません。

私は単純に画像の名前を変更し、ピクセルの幅と高さを定義するインクルード：@include img-replace("logo.png", 104px, 47px, inline-block);を持っています。

私はこれを変更したいと思います。なぜなら、一部の開発者はそのイメージ名を変更したいだけで、サイズについての心配はもう理解できないからです。

この場合、画像の幅：104ピクセル、高さ：47ピクセルなので、次の画像が大きくなったり小さくなったりする可能性があるので、もう心配したくありません。

だから皆にこれはどうすればいいですか？ありがとうございました。

$path--rel  : "../images"; 

@mixin img-replace($img, $w, $h, $disp: block) { 
    background-image: url('#{$path--rel}/#{$img}'); 
    background-repeat: no-repeat; 
    width: $w; 
    height: $h; 
    display: $disp; 
} 


.site-logo { 
    @include img-replace("logo.png", 104px, 47px, inline-block); 
    margin-top: 8px; 
    margin-left: 6px; 
} 

Answer 1

SASSを使用すると、mixinのパラメータに対してデフォルト値を設定することができます。例えば、あなたの例では、私はデフォルトで104pxする幅を指定しており、高さは、デフォルトでは47pxされる：$w、$hまたは$dispは、デフォルト値がレンダリングさ中断している場合は

$path--rel: "../images"; 

@mixin img-replace($img, $w:104px, $h:47px, $disp:null) { 
    background-image: url('#{$path--rel}/#{$img}'); 
    background-repeat: no-repeat; 
    width: $w; 
    height: $h; 
    @if ($disp) {display: $disp;} 
} 

.site-logo { 
    @include img-replace(
     $img: "logo.png", 
     $disp: "inline-block" 
); 
    margin-top: 8px; 
    margin-left: 6px; 
} 

。これは基本的にはオプションです。

Answer 2

サイズをオプションにすると、要素の幅や高さがなくなるという問題があります。これは、devは要素のサイズを決定しなければならないことを意味します。そうでなければ0x0になり、画像は表示されません。

devが画像のサイズを見つけたり書き込んだりするのが面倒な場合は、マップを使用してすべての画像とそのサイズを保存することができます。そのため、関数は画像に応じて正しいサイズを挿入します値。続きを読むhere

Answer 3

私は正しく理解していれば、画像のパスを渡すだけでこのミックスインを使いたいと思う。しかし、それぞれの画像のサイズは異なります。 これはSASSでは実行できません。 代わりに、あなたは、例えば自分のイメージをインラインで追加する必要があります

<img src="images/logo.png" alt=""> 

または

<img src="images/logo.png" alt="" width="104" height="74"> 

をそれ以外の場合は上記のクリス・spittles @によって答えはあなたがデフォルトの幅と高さを渡す必要があることを意味し、正しいですあなたのmixin。 ミックスインを引き続き使用する場合は、寸法の異なる画像の幅と高さを渡す必要があります。

Answer 4

あなたのミックスインは、これに変更した場合の前に示唆したように -

@mixin img-replace($img, $w: null, $h: null, $disp: block) { 
    background-image: url('#{$path--rel}/#{$img}'); 
    background-repeat: no-repeat; 
    display: $disp; 
    width: $w; 
    height: $h; 
} 

あなたは幅と高さの引数を割り当てする必要がなくても、柔軟にあなたのコードを使用することができます。あなたが書くのであれば、今、この - を変更することなく、それはまたあなたの前に書かれたコードを保持します

.site-logo { 
    background-image: url("../images/logo.png"); 
    background-repeat: no-repeat; 
    display: block; 
    margin-top: 8px; 
    margin-left: 6px; 
} 

-

.site-logo { 
    @include img-replace("logo.png"); 
    margin-top: 8px; 
    margin-left: 6px; 
} 

それがにコンパイルされます。

あなたは、開発者が割り当てることができる異なるタイプの画像にデフォルト値を提供するような任意の特定の要件を、持っている場合今、あなたのコードにマップを追加することができます -

$small-img: (w: 100px, h: 100px); 
$medium-img: (w: 200px, h: 200px); 

今、あなたは同じようimg-replaceを呼び出すことができますこの -

.site-logo { 
    @include img-replace("logo.png", $small-img...); 
} 
.site-medium-image { 
    @include img-replace("logo.png", $medium-img...); 
} 

これはにコンパイルされます -

.site-logo { 
    background-image: url("../images/logo.png"); 
    background-repeat: no-repeat; 
    display: block; 
    width: 100px; 
    height: 100px; 
} 
.site-medium-image { 
    background-image: url("../images/logo.png"); 
    background-repeat: no-repeat; 
    display: block; 
    width: 200px; 
    height: 200px; 
} 

この...は、引数variable argumentsサスは の終わりすべての残りの引数を取り、リストとして パッケージそれらをミックスインまたは関数宣言で引数です「変数の引数を、」サポート

になります。これらの引数は普通の 引数のように見えますが、それに続くのは...