软件简介

linaria 是一个零运行时 CSS-in-JS 库。在 JS 中编写 CSS,并在构建期间获得真正的 CSS 文件。使用 React 绑定的基于动态道具的样式,并将其自动转换为 CSS 变量。通过 source maps 和 linting 支持获得巨大的生产力。

特性:

  • 在 JS 中编写 CSS,但运行时间为零,CSS在构建时被提取到 CSS 文件中
  • 熟悉的 CSS 语法与 Sass 一样嵌套
  • 使用基于 React 绑定的动态道具样式,在幕后使用 CSS 变量
  • 通过 CSS 源码图轻松找到样式的定义位置
  • 使用 stylelint 在 JS 中提示你的 CSS
  • 使用 JavaScript 的逻辑,不需要 CSS 预处理程序
  • 可以选择使用任何 CSS 预处理器,如 Sass 或 PostCSS 
import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
2020/08/20 09:00

Jest 单元测试快速上手指南

技术交流群: https://fiora.suisuijiang.com/ 原文链接: https://github.com/yinxin630/blog/issues/38 Jest[1] 是一款简单, 容易上手且功能十分强大的测试框架 安装 yarn add -D jest 使用 创建 test 目录, 添加 plus.spec.js 文件 describe('example', () => {     it('should equal 2', () => {         expect(1 + 1).toBe(2);     }); }); 执行 yarn jest 或者 yarn jest test/plus.spec.js 运行...

0
0
发表于大前端专区
2020/09/06 12:00

Jest 单元测试快速上手指南

原文链接: https://github.com/yinxin630/blog/issues/38 Jest[1] 是一款简单, 容易上手且功能十分强大的测试框架 安装 yarn add -D jest 使用 创建 test 目录, 添加 plus.spec.js 文件 describe('example', () => {     it('should equal 2', () => {         expect(1 + 1).toBe(2);     }); }); 执行 yarn jest 或者 yarn jest test/plus.spec.js 运行测试用例 成功结果 失败结果 输出测试覆盖率 ...

0
0
2020/05/26 18:29

Taro 3.0 RC:React/Vue/Nerv 任你选

在 Taro Next 预览版(Alpha)版本之后,我们没有停下迭代的步伐,经过两个月的开发和数百次提交之后,我们谨慎但坚定地发布 Taro Next 测试(Beta) 版,Beta 版发布后,社区很多开发者使用上了 Taro Next,他们的帮助和赞誉加上我们内部项目使用的良好反馈,Beta 发布一个月之后,我们非常自信地发布了候选版(RC)版本。 在稳定的 Beta 版本里,Taro 也添加了更多的功能: H5 编译支持— H5 编译支持是我们版本升级最重要的理...

0
0
2020/07/01 13:12

Taro 3 正式版发布!京东推出开放式跨端跨框架方案,这些React、Nerv、Vue、jQuey都能支持上了!

点击“开发者技术前线”,选择“星标🔝” 在看|星标|留言, 真爱 来源:凹凸实验室 编辑部:可可 Taro 是什么? Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样,Web、App 端(React Native)、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得...

0
0
2020/07/01 08:38

Taro 3 正式版发布:开放式跨端跨框架解决方案

从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性: 跨框架:React、Nerv、Vue2、Vue3、jQuery— 在旧版本的 Taro,我们以微信小程序的开发规范为基准,使用 React/JSX 的方式来进行开发。而在 Taro 3,我们把这一思路量化为一个编程模型: ...

0
0
2020/07/02 07:00

喜大普奔!Taro 3 正式版发布:开放式跨端跨框架解决方案

从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性: 跨框架:React、Nerv、Vue2、Vue3、jQuery— 在旧版本的 Taro,我们以微信小程序的开发规范为基准,使用 React/JSX 的方式来进行开发。而在 Taro 3,我们把这一思路量化为一个编程模型: ...

0
0
发表了博客
2018/08/05 17:14

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 也不错,网上也有相关的比较,以及有优缺点说明 Some of the best CSS in Javascript libraries to use in your app. When building Bit, turning components into building blocks which can be shared, used and developed anywhere, we had to get deeply familiarized with the various ways people choos...

0
0
发表了博客
2020/05/27 13:23

Taro 3.0 RC:React/Vue/Nerv 任你选

在 Taro Next 预览版(Alpha)版本之后,我们没有停下迭代的步伐,经过两个月的开发和数百次提交之后,我们谨慎但坚定地发布 Taro Next 测试(Beta) 版,Beta 版发布后,社区很多开发者使用上了 Taro Next,他们的帮助和赞誉加上我们内部项目使用的良好反馈,Beta 发布一个月之后,我们非常自信地发布了候选版(RC)版本。 在稳定的 Beta 版本里,Taro 也添加了更多的功能: H5 编译支持 H5 编译支持是我们版本升级最重要的理由...

0
0
发表了博客
2018/04/20 19:41

一个全终端的消息推送解决方案

全终端消息推送解决方案 项目介绍 这是一个全终端的消息推送解决方案,实现类似微博的消息发布模式,用户可在移动端,网页端或是PC端发布消息,相应的,其他用户可在上述平台上接收并查看这个用户发送的消息。预计实现基础的注册,登录验证以及发布消息与接收消息功能。 竞争性需求分析框架 N——need,需求 该项目主要面向中小企业开发,大多数小型公司或团队内部交流和资料共享都在使用一些大众化的社交工具,由于这些工具都是...

0
0
2020/07/01 00:00

Taro 3 正式版发布!京东推出开放式跨端跨框架方案,这些React、Nerv、Vue、jQuey都能支持上了!

点击“开发者技术前线”,选择“星标🔝” 在看|星标|留言, 真爱 来源:凹凸实验室 编辑部:可可 Taro 是什么? Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样,Web、App 端(React Native)、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部