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>;
GitHub:https://github.com/callstack/linaria
网站描述:一个零运行时 CSS-in-JS 库
linaria
小编说
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。