SASS Функция не работает, как ожидалось

Question

У меня есть SCSS подмешать и функции для предварительной загрузки фоновых изображений:

$preloaded-images:null; 
@function preload-image($image-url) { 
    $preloaded-images: $preloaded-images url(#{$image-url}); 
    @return $preloaded-images; 
} 

@mixin background-image-generator($img-name) { 
    background: url(../images/backgrounds/#{$img-name}/#{$img-name}.jpg) no-repeat center center local; 
    $tmp: preload-image('../images/backgrounds/#{$img-name}/#{$img-name}.jpg'); 
} 

body:before { 
    display:none; 
    content:$preloaded-images; 
} 

.background1 { 
    @include background-image-generator('plaits'); 
} 

я ожидаю, что это вернет следующий CSS:

body:before { 
    display: none; 
    content: url(../images/backgrounds/plaits/plaits.jpg); 
} 

.background1 { 
    background: url(../images/backgrounds/plaits/plaits.jpg) no-repeat center center local; } 

Это почти делает, но содержание для тела: перед тем null. Может кто-то указать мне верное направление?

Answer 1

EDIT: Ahhh Я вижу, что вы пытаетесь сделать сейчас, и почему установлен $tmp.

Вопрос заключается в том, что SASS будет идти сверху вниз так, когда он попадает в body:before он проверяет $preloaded-images и замечает его null, чтобы он не назначать ничего.

$preloaded-images присваивается значение, когда @mixin background-image-generator вызывается так, что его нужно вызывать первым. Так что фактически переключение их работает (я его протестировал).

$preloaded-images:null; 
@function preload-image($image-url) { 
    $preloaded-images: $preloaded-images url(#{$image-url}); 
    @return $preloaded-images; 
} 

@mixin background-image-generator($img-name) { 
    background: url(../images/backgrounds/#{$img-name}/#{$img-name}.jpg) no-repeat center center local; 
    $tmp: preload-image('../images/backgrounds/#{$img-name}/#{$img-name}.jpg'); 
} 

.background1 { 
    @include background-image-generator('plaits'); 
} 

// move this below so background-image-generator will run 
body:before { 
    display:none; 
    content:$preloaded-images; 
} 

И это выплевывает для меня (мой минификатор на работе).

.background1{background:url(../images/backgrounds/plaits/plaits.jpg) no-repeat center center local}body:before{display:none;content: url(../images/backgrounds/plaits/plaits.jpg)}