JSS-cssinjs高性能 JS to CSS 编译器

联合创作 · 2023-09-23

JSS 是一种比 CSS 更强大的抽象,它使用 JavaScript 以声明和可维护的方式描述样式。它是一个高性能的 JS to CSS 编译器,可在运行时和服务器端运行。它是低级别并且与框架无关的,大约有 6KB 大小,并且可以通过插件 API 进行扩展。

主要特性

使用场景

  • 构建 JavaScript 很重的应用

  • 使用基于组件的架构

  • 构建可重用的 UI 库

  • 需要一个无冲突的 CSS (外部内容、第三方 UI 组件等)

  • 需要在 JS 和 CSS 之间共享代码

  • 下载量小很重要

  • 健壮性和代码重用很重要

  • 易于维护很重要

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>
    `

    生成结果

    <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>
    浏览 4
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    编辑
    举报
    评论
    图片
    表情
    推荐
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    编辑
    举报