是否可以在样式标记中使用模板表达式

Question

grid-template-areas:
'votes commentBody commentBody'
'votes commentBody commentBody'
'commentBottom commentBottom commentBottom'
'{replies.length ? 'replies replies replies' : ''}';

但是这个错误超出了

有可能这样做吗？如果不是，为什么不呢？我将如何处理？(我想内联样式也可以，或者我可以做一些类似样式组件的事情(

Answer 1

我能够让它像这样工作：

可能有一种比一些链式替换更好的方法来确保其正确间隔，但现在就是了

REPL

stores.js

import { writable } from 'svelte/store';
export const count = writable(1);

index.js

<script>
import { count } from './stores.js';
let maxLength = 3;
$: header = ('header'.repeat($count) + 'spacer'.repeat(3 - $count))
.replace(/erhe/g, 'er he')
.replace(/ersp/g, 'er sp');
</script>
<main style={`grid-template-areas:"${header}""content content content""footer footer footer"`}>
<header>{$count}</header>
<div class="spacer" />
<div class="content">
<button on:click={() => {if ($count < maxLength) $count++}}>More header</button>
<button on:click={() => {if ($count > 1) $count--}}>Less header</button>
</div>
</main>
<style>
main {
display: grid;
}
header {
grid-area: header;
padding: 1rem;
color: #fff;
background-color: #333;
}
.content {
grid-area: content;
padding: 1rem;
background-color: #444;
}
</style>