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

【问题标题】：Is it possible to use template expressions inside style tags?是否可以在样式标签中使用模板表达式？
【发布时间】：2022-01-04 17:06:24
【问题描述】：

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

但这会出错

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

【问题讨论】：

AFAIK 在样式标签中是不可能的，但可以内联使用它们
我是用类做的，但还是谢谢 :)
另一种方法是使用 css 变量代替，这是一个触摸清洁器

标签： svelte svelte-3

【解决方案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>

【讨论】：