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

    评论(1)

    刚刚什么也没说
    刚刚什么也没说
    好不容易前后端都分离了,样式和脚本又糅到一起了

    暂无资讯

    暂无问答

    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
    549
    0
    关于tomcat和sessionCookieName和SESSION_PARAMETER_NAME以

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

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

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

    2015/12/03 18:46
    203
    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
    1.3K
    0
    将JSON转成DataSet(DataTable)

    将JSON转成DataSet(DataTable)

    2016/08/31 11:14
    1.7K
    0
    GIS期刊发表论文周期分析

    这篇博客分析GIS期刊论文的发表周期,细致入微,比较,老外做事情确实很精细,还整理成文发表在IJGIS之上。

    2016/02/03 15:59
    274
    1
    Android对应关系——版本、源码和API Level对应关系

    The code names match the following version numbers, along with API levels and NDK releases provided for convenience: Code name Version API level Marshmallow棉花糖 6.0 API level ...

    2016/07/25 15:09
    1.1K
    0
    使用Tengine concat模块合并多个CSS,JS 请求

    用淘宝改良的Nginx(Tengine)提供web服务 今天在本博客上顺利把Nginx换成了Tengine;并启用了动态加载模块 mod_concat,对本博客使用的知更鸟主题各个页面head模板中大量调用的多个CSS,JSS...

    2015/08/12 15:09
    1.1K
    1
    What's New in JDK 8 java8新特性汇总

    本文根据oracle官网的What's New in JDK 8文章,针对java8的新特性进行整理,汇总,并加入自己的理解。

    2014/04/03 10:46
    1.1K
    5

    没有更多内容

    加载失败,请刷新页面

    返回顶部
    顶部