linaria

linaria 介绍

Linaria提供了一个新的API，可以与react一起使用，目的是提供更好的开发者体验和构建集成。Linaria 的标签遵循的是 ES2015 标签模板字面量语法。模板字面量是指可以嵌入表达式的字符串。被标记的模板可以使用函数来解析模板字面量。在上面的代码示例中，display: inline-block 是一个模板字面量，styled.a 是一个模板标签，styled.adisplay: inline-block是一个被标记的模板字面量。开发人员可以使用标准 css 语法或对象样式语法编写模板字面量

特征

用js编写css，但是运行时为零，因此在构建过程中会将css提取到css文件中

熟悉Sass的css语法，例如嵌套

使用动态道具基于风格与阵营绑定，在后台使用css变量

轻松查找使用css源映射定义样式的位置

使用stylelint在js中清理css

使用JavaScript进行逻辑处理，无需css预处理程序

（可选）使用任何css预处理程序，例如Sass或PostCSS

安装

npm install linaria

or

yarn add linaria

Linaria可以与任何框架一起使用，并带有react的附加帮助器。基本语法如下：  

import { css } from 'linaria';

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 class={header}>Hello world</h1>;

网站地址:https://linaria.now.sh

GitHub:https://github.com/callstack/linaria

网站描述:一个零运行时 css-in-JS 库

linaria

官方网站：https://linaria.now.sh