linaria 介绍
Linaria提供了 一个 新的API,可以与react一起使用,目的是提供更好的开发者体验和构建集成。Linaria 的 标签 遵循的是 ES2015 标签 模板字面量语法。模板字面量是指可以嵌入表达式的字符串。被 标记 的模板可以使用 函数 来解析模板字面量。在上面的 代码 示例中, dis play: inline-block 是 一个 模板字面量,styled.a 是 一个 模板 标签 ,styled.a dis play: 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 { modu lars cale, 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: ${modu lars cale(2)};
${ hidpi (1.5)} {
font-size: ${modu lars cale(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
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。