Question

我有一个SCSS mixin和用于预加载背景图像的功能：

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

它几乎可以，但是body的内容：before是null。有人能指出我正确的方向吗？

Answer 1

编辑：啊，我看到你现在要做的是什么以及$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)}

SASS功能无法按预期工作

1 个答案: