img-SASS替換

我創建了一個mixin來輕鬆處理圖像並替換，現在我的應用程序正在增長，我不知道如何改進此代碼。img-SASS替換

基本上我有一個包括：@include img-replace("logo.png", 104px, 47px, inline-block);其中我簡單地更改圖像的名稱，並定義像素的寬度和高度。

我想改變它，因爲現在，一些開發人員只想改變圖像名稱，而不必擔心大小了解？

在這種情況下，圖像的寬度：104px和高度：47px，所以他們不想再擔心它，因爲下一張圖像可以更大或更小。

所以大家任何解決方案？謝謝。

$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; 
}

來源

2017-10-06 Raduken

我覺得框架[指南針]（http://compass-style.org/）與它的[圖像尺寸傭工（HTTP： //compass-style.org/reference/compass/helpers/image-dimensions/）可能有助於你想做什麼 – Zac

使用SASS，您可以根據mixin中的參數設置默認值;在你的例子，例如，我已指定寬度設置爲默認情況下，高度104px默認要47px：

$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; 
}

如果$w，$h或$disp都不放過默認值得到呈現。這基本上使它們可選。

來源

2017-10-09 09:53:36

感謝您的幫助，但如果我沒有寬度和高度： – Raduken

我確實想知道......但在這種情況下，只需將默認值設置爲默認的寬度和高度，我已經修改了我的答案， –

再次感謝您的時間，但我無法在此存儲任何大小，因爲每個圖像都會有不同的尺寸，下面的人會提出類似的建議：使用地圖來存儲所有圖像和尺寸，我試過但沒有成功，任何想法我可以這樣做嗎？謝謝。 – Raduken

問題是，如果您將尺寸設置爲可選，則元素將沒有寬度或高度。這意味着開發者仍然需要確定元素的大小，否則它將只是0x0，並且圖片不會顯示！

如果問題是dev太懶惰，無法查找和寫入圖像的大小，您可以隨時使用地圖來存儲所有圖像及其大小，因此該功能會根據圖像插入正確的大小值。更多here

來源

2017-10-09 10:06:08 Salketer

感謝您的解釋，你能幫助我嗎？我正在嘗試創建此存儲映像的sass映射，但沒有成功。 – Raduken

對不起，我從來沒有做過薩斯。我只是通過閱讀文檔和教程來幫助你瞭解它。我無意測試我會寫什麼，我寧願不給一個錯誤的代碼......也許以後如果我有時間的話。 – Salketer

所以，如果我理解正確，你想通過傳遞圖像路徑來使用這個mixin。但每個圖像都有不同的大小。這是SASS無法做到的。相反，你應該添加映像內嵌，如：

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

或

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

否則，答案由@克里斯 - spittles以上是正確的，這意味着你應該通過默認的寬度和高度你的混合。如果你想繼續使用mixin，你將需要通過具有不同尺寸的圖像的寬度和高度。

來源

2017-10-13 09:40:12

就好像你改變你的mixin這個建議之前 -

@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; 
}

您可以使用靈活的代碼，而無需任何需要指定width和height參數。所以，現在，如果你寫這篇文章 -

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

它會被編譯爲 -

.site-logo { 
    background-image: url("../images/logo.png"); 
    background-repeat: no-repeat; 
    display: block; 
    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

薩斯支持「可變參數」，其是在端部的混入或函數聲明採取所有剩餘的參數和包裝起來作爲一個列表參數。這些論點看起來就像正常爭論，但隨後...

來源

2017-10-14 16:37:25 Shovon

回答

相關問題