Question

我想创建一个苗条的组件来接收图像的名称和路径。我希望组件使用CSS将图像设置为“背景图像”。

我尝试了以下似乎无效的方法...

在 App.svelte 中调用的组件：

<Image image_url='./images/image1.jpg' />

Image.Svelte

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url({image_url});
    min-height: 100%;
}
</style>

<div class="image">
  <p>some text</p>
</div>

当我检查组件时，background_image的css是：

background-image: url({image_url});

是否可以在CSS中转换变量？

Answer 1

不。组件样式在组件的所有实例之间共享，这是因为它们被静态提取到.css文件中，或者是因为它们被注入到所有组件都引用的单个<style>元素中。如果可以将变量直接放置在组件的<style>内，则这意味着Svelte将需要创建封装的样式 per-instance ，这将对性能造成不利影响，并且会消耗大量资源更多的内存。

有两种方法可以解决此问题。第一种是将内联样式用于每个实例都可以更改的内容：

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: url({image_url}); */
    min-height: 100%;
}
</style>

<!-- <div class="image"> -->
<div class="image" style="background-image: url({image_url});">
  <p>some text</p>
</div>

第二个是使用CSS变量，特别是如果您需要在多个位置使用值的情况下：

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: url({image_url}); */
    background-image: var(--image);
    min-height: 100%;
}
</style>

<!-- <div class="image"> -->
<div class="image" style="--image: url({image_url});">
  <p>some text</p>
</div>

Answer 2

将Svelte块视为CSS黑盒。您不能以与无法在浏览器的CSS文件中使用javascript变量相同的方式来使用javascript变量。

但是...因为它是CSS盒子，所以您始终可以使用scss并使用像this one这样的精巧预处理器来编译块。那你就可以做

<script>
export let image_url;
</script>

<style lang="scss">
@import "my/path/to/variables";

.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(#{$image_url});
    min-height: 100%;
}
</style>

<div class="image">
  <p>some text</p>
</div>

我可以使用传递给组件的变量设置苗条样式的CSS属性值吗

2 个答案: