img-replace with SASS

Question

Stworzyłem mixin, aby łatwo manipulować obrazami i zastępować, teraz moja aplikacja się rozwija i nie wiem jak poprawić ten kod.

w zasadzie mam to: @include img-replace("logo.png", 104px, 47px, inline-block); gdzie po prostu zmieniam nazwę obrazu i definiuję szerokość i wysokość pikseli.

Chciałbym to zmienić, ponieważ teraz niektórzy programiści chcą zmienić nazwę obrazu i nie martwić się już o rozmiar?

W takim przypadku obraz ma: szerokość: 104 pikseli i wysokość: 47 pikseli, więc nie chcieliby się już tym martwić, ponieważ następny obraz może być większy lub mniejszy.

, więc ludzie jakieś rozwiązanie dla tego? Dziękuję Ci.

$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

Za pomocą SASS można ustawić wartości domyślne na parametry w mixinie; w przykładzie na przykład, mam określony szerokość być domyślnie 104px i wysokości do 47px domyślnie:

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

Jeśli $w, $h lub $disp są przerwane domyślne wartości uzyskać renderowane. Zasadniczo sprawia to, że są opcjonalne.

Answer 2

Problem polega na tym, że jeśli rozmiar zostanie wybrany jako opcjonalny, element nie będzie mieć szerokości ani wysokości. Oznacza to, że programista nadal będzie musiał określić rozmiar elementów, inaczej będzie to 0x0, a obraz się nie wyświetli!

Jeśli problem polega na tym, że programista jest zbyt leniwy, aby znaleźć i zapisać rozmiar obrazów, zawsze można użyć mapy do przechowywania wszystkich obrazów i ich rozmiarów, aby funkcja wstawiała poprawny rozmiar w zależności od obrazu wartość. Przeczytaj więcej here

Answer 3

Więc jeśli rozumiem poprawnie, chcesz użyć tego mixin, po prostu przekazując ścieżkę obrazu. Ale każdy obraz ma inny rozmiar. Nie można tego zrobić za pomocą SASS. Zamiast tego należy dodać inline obrazu, np

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

lub

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

przeciwnym razie odpowiedź przez @ chris-spittles powyżej jest poprawne, co oznacza, że ​​należy podać domyślną szerokość i wysokość Twój mixin. A jeśli chcesz nadal używać mixin, musisz podać szerokość i wysokość obrazów, które mają różne wymiary.

Answer 4

Jak sugerowano wcześniej, jeśli zmienisz wstawek do tego -

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

Można użyć kodu elastycznie bez żadnej potrzeby, aby przypisać szerokość i wysokość argumenty. Więc teraz, gdy piszę te słowa -

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

to dostanie skompilowany do -

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

Będzie również zachować swoje wcześniej napisane kody, bez żadnych zmian.

Teraz, jeśli masz jakieś szczególne wymagania, takie jak dostarczanie wartości domyślne dla różnych typów obrazów, które programista może przypisać można dodać mapy w kodzie -

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

teraz można nazwać img-replace jak to -

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

ten dostanie skompilowany do -

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

Ten ... sprawia argumenty variable arguments

Sass obsługuje „zmiennej argumenty”, które są argumenty na koniec deklarację wstawek lub funkcja, która podejmie wszelkie resztki argumenty i pakiet je w postaci listy. Argumenty te wyglądają jak normalne argumentów, ale następują ...