是否可以在样式标签内使用模板表达式？

Question

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

但是这个错误

可以吗？如果不是为什么不，我将如何处理这个问题？（我想内联样式也可以工作，或者我可以做类似 styled-components 的事情）

Answer 1

我能够让它像这样工作：

可能有比某些链式替换更好的方法来确保其正确间隔，但就是这样。

The 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>

是否可以在样式标签内使用模板表达式？

Is it possible to use template expressions inside style tags?

svelte

svelte-3