在 ECMAScript 我們會以 Template String 或 + 組合 String,在 CSS 若以 Variable 為 String,我們也可加以組合。
Version
CSS 3
Concatenate String

( 、 everywhere 與 ) 透過組合 String 實現。
<template>
<div class="title">JavaScript</div>
</template>
<style scoped>
* {
--open: '(';
--close: ')';
}
.title::after {
content: ' ' var(--open) 'everywhere' var(--close);
}
</style>
第 6 行
* {
--open: '(';
--close: ')';
}
--open:將(String 定義到--open--close:將)String 定義到--close
11 行
.title::after {
content: ' ' var(--open) 'everywhere' var(--close);
}
CSS 若要組合 String,不能使用 template string 或 +,只要使用 space 分隔即可。
Conclusion
- String 與 CSS variable 亦可直接以 space 組合