在 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 組合