點燈坊

失くすものさえない今が強くなるチャンスよ

CSS Variable 組合 String

Sam Xiao's Avatar 2021-02-06

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

Version

CSS 3

Concatenate String

concat000

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

Reference

Coder’s Block, What Can You Put in a CSS Variable ?