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

MIT
JavaScript 查看源码»
跨平台
2018-10-15
h4cd

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>
    的码云指数为
    超过 的项目
    加载中

    评论(0)

    暂无评论

    暂无资讯

    暂无问答

    IMP 导入表结构到指定用户

    IMP JSS/JSS@DB FULL=Y FILE=TEST.DMP LOG=JSS.LOG IGNORE=Y ROWS=N;

    2012/08/29 15:02
    480
    0
    asp.net c#轻松调用百度在线翻译功能

    首先去百度:注册个apikey http://developer.baidu.com/wiki/index.php?title=%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3%E9%A6%96%E9%A1%B5/%E7%99%BE%E5%BA%A6%E7%BF%BB%E8%AF%91API 获取代码:...

    2015/10/22 16:14
    328
    0
    关于tomcat和sessionCookieName和SESSION_PARAMETER_NAME以

    关于tomcat和sessionCookieName和SESSION_PARAMETER_NAME以及disableURLRewriting参数原理和使用

    2015/12/04 22:32
    249
    0
    ANT自动化压缩合并JS/CSS和更改版本号

    ANT自动化压缩合并JS/CSS和更改版本号

    2015/12/03 18:46
    131
    0
    前端进阶 -css的弱化与js的强化(11)

    web的三要素html, css, js在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的强化成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱...

    2018/09/22 22:22
    9
    0
    基于docker-registry 源代码搭建私有环境

    docker, docker-registry, 私有仓库

    2015/01/08 09:35
    162
    0
    redhat6.4下使用centos的yum源安装mysql

    思路:卸载redhat自带yum,然后下载centos的yum,安装后修改配置文件 1、首先到http://mirrors.163.com/centos下载软件包 x86 地址:http://mirrors.163.com/centos/6/os/i386/Packages/ x86...

    2015/02/27 14:57
    1K
    0
    将JSON转成DataSet(DataTable)

    将JSON转成DataSet(DataTable)

    2016/08/31 11:14
    41
    0
    300粉丝集结号吹响了,可以开源重量级的流程引擎或UI引擎

    关注这两个方面的同学个踊跃加粉了~~同时在下面回复期望开源哪一个,将先开源呼声高的一个。 好吧,先小秀一下UI: 增加下面的pom依赖,表示此工程需要org.tinygroup.aerowindow       ...

    2014/03/29 06:27
    1K
    1
    给 console 添加颜色

    简评:使用 %c 声明可以给 console 的输出添加 CSS 样式,日志太多的话,给不同种类的日志设置不同的样式,可以极大的提升阅读体验。 什么是 %c %c: 标识将 CSS 样式应用于 %c 之后的 consol...

    2018/11/27 11:33
    12
    0

    没有更多内容

    加载失败,请刷新页面

    返回顶部
    顶部