JSS-cssinjs高性能 JS to CSS 編譯器
JSS 是一種比 CSS 更強(qiáng)大的抽象，它使用 JavaScript 以聲明和可維護(hù)的方式描述樣式。它是一個(gè)高性能的 JS to CSS 編譯器，可在運(yùn)行時(shí)和服務(wù)器端運(yùn)行。它是低級(jí)別并且與框架無(wú)關(guān)的，大約有 6KB 大小，并且可以通過(guò)插件 API 進(jìn)行擴(kuò)展。
主要特性
框架無(wú)關(guān)
使用場(chǎng)景
構(gòu)建 JavaScript 很重的應(yīng)用
使用基于組件的架構(gòu)
構(gòu)建可重用的 UI 庫(kù)
需要一個(gè)無(wú)沖突的 CSS (外部?jī)?nèi)容、第三方 UI 組件等)
需要在 JS 和 CSS 之間共享代碼
下載量小很重要
健壯性和代碼重用很重要
易于維護(hù)很重要
Demo
import jss from 'jss'
import preset from 'jss-preset-default'
import color from 'color'
// One time setup with default plugins and settings.
jss.setup(preset())
const styles = {
button: {
fontSize: 12,
'&:hover': {
background: 'blue'
}
},
ctaButton: {
extend: 'button',
'&:hover': {
background: color('blue')
.darken(0.3)
.hex()
}
},
'@media (min-width: 1024px)': {
button: {
width: 200
}
}
}
const {classes} = jss.createStyleSheet(styles).attach()
document.body.innerHTML = `
<button class="${classes.button}">Button</button>
<button class="${classes.ctaButton}">CTA Button</button>
`
生成結(jié)果
<head>
<style>
.button-123456 {
font-size: 12px;
}
.button-123456:hover {
background: blue;
}
.ctaButton-789012 {
font-size: 12px;
}
.ctaButton-789012:hover {
background: red;
}
@media (min-width: 1024px) {
.button-123456 {
min-width: 200px;
}
}
</style>
</head>
<body>
<button class="button-123456">Button</button>
<button class="ctaButton-789012">CTA Button</button>
</body>評(píng)論
圖片
表情