JSS-cssinjs 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
JSS-cssinjs 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: 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>
    展开阅读全文

    代码

    的 Gitee 指数为
    超过 的项目

    JSS-cssinjs 的相关资讯

    还没有任何资讯

    JSS-cssinjs 的相关博客

    [CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables

    This is an introduction to CSSinJS that doesn't require any JavaScript knowledge, just a basic CSS. It shows how to c...

    styled-component, emotion and jss 对比

    如果你用组件化的前端方案,比如React这种,那么毫无疑问,css in js方案要比传统的css方案要好。 css in js 有两点不可撼动的...

    前端优化,包括css,jss,img,cookie

    ##前端优化,来自某懒观看麦子学院视频的笔记。 尽可能减少HTTP的请求数 使用CDN 添加Expirs头,或者Cache-control Gzip组件压...

    uniapp引入jss-dk开发公众号H5上传多张图片之getLocalImgData的小坑

    getLocalImgData:在开发过程中,在IOS上得到的数据是一个图片的base64码,而在安卓机上得到的是没有头部的base64码,且其中可...

    9 CSS in JS Libraries You Should Know in 2018

    转自:https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b 实际上 wix 的 stylable 也不错...

    IMP 导入表结构到指定用户

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

    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%9...

    关于tomcat和sessionCookieName和SESSION_PARAMETER_NAME以

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

    洛谷 P2813【母舰】 题解

    总体思路: 输入护盾和攻击力,然后快速排序sort走起来, 排完序之后从第一个开始找,如果攻击力大于护盾,护盾继续下一个, ...

    前端进阶 -css的弱化与js的强化(11)

    web的三要素html, css, js在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的强化成为了一种趋...

    JSS-cssinjs 的相关问答

    还没有任何问答,马上提问

    评论 (1)

    加载中
    好不容易前后端都分离了,样式和脚本又糅到一起了
    2019/05/30 15:39
    回复
    举报
    更多评论
    1 评论
    5 收藏
    分享
    返回顶部
    顶部