YIS 基于 postcss 支持了 cssnext 语法,因此开发者可以随意书写下一代 css 代码, 可以通过添加 postcss plugin
获得更多预编译能力。
YIS 样式打包 css-module 打包并配置了生成规则,因此可以理解为普通的样式编写是局部的,详情见下文产出规则
小节。
YIS
为开发者提供了 reset.css
。
YIS
封装的样式变量,包括字体、颜色、 动画(组件使用)、自定义媒体查询100px = 1rem
的 rem
单位/** yis-demo/src/pages/ripple/main.css **/
@import '@qnpm/yis/components/reset.css';
.container{
//.....
}
/** yis-demo/src/pages/ripple/main.css **/
@import '@qnpm/yis/components/reset.css';
.container{
//.....
}
为了更好地解决样式命名冲突的问题 , YIS
基于 css-module
设计了命名空间规则,按照 [组件类别]-[文件名称]-[类名]
输出。
内置规则有以下四类:
YIS
组件样式由 yis
模块提供,开发者引入 js 同时自动依赖相应样式。使用 yis-xxx-yyy
三级构成 ,xxx
代表组件类别, yyy
为样式名称。theme-xxx-yyy
由开发者扩展 yis
组件样式生成,在 theme
目录下,以组件名为名的 css
文件。/** themes/header.css **/
@import "@qnpm/yis/components/header/header.css";
:root{
--header-background-color: var(--color-primary-main);
}
.container{
height: 45px;
}
/** 产出文件包含全部引入文件样式 省略具体内容代码 **/
.themes-header-container{
// ......
}
.themes-header-left,
.themes-header-right {
// ......
}
.themes-header-left.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating,.themes-header-right.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating{
// ......
}
.themes-header-left{
// ......
}
.themes-header-right{
// ......
}
.themes-header-center {
// ......
}
.themes-header-center::before {
// ......
}
.themes-header-container{
// ......
}
/** themes/header.css **/
@import "@qnpm/yis/components/header/header.css";
:root{
--header-background-color: var(--color-primary-main);
}
.container{
height: 45px;
}
/** 产出文件包含全部引入文件样式 省略具体内容代码 **/
.themes-header-container{
// ......
}
.themes-header-left,
.themes-header-right {
// ......
}
.themes-header-left.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating,.themes-header-right.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating{
// ......
}
.themes-header-left{
// ......
}
.themes-header-right{
// ......
}
.themes-header-center {
// ......
}
.themes-header-center::before {
// ......
}
.themes-header-container{
// ......
}
components-xxx-yyy
由开发者项目级别通用组件,在/src/components
目录下面的以组件名为名的 css
文件。
pages-xxx-yyy
由开发者页面级别的样式产出,在 pages
目录下以页面名称命名的文件夹下的 main.css
文件。
/** pages/home/main.css **/
.list {
position: relative
}
/** 产出文件**/
.pages-home-list {
position: relative
}
/** pages/home/main.css **/
.list {
position: relative
}
/** 产出文件**/
.pages-home-list {
position: relative
}
如常编写样式文件
/** yis-demo/src/pages/home/main.css **/
.navigation {
//......
}
.navigation-item {
//......
& .img {
//......
}
& .text {
//......
}
}
打包阶段 引入的 css
文件会生成一个对象对应着样式到产出样式名称,因此 js
文件中引用的是响应的类名,生成名称规则参考 产出规则
。
{
"navigation":"pages-home-navigation",
"navigation-item":"pages-home-navigation-item",
"img":"pages-home-img",
"text":"pages-home-text"
};
在 js
文件中引用,传入给指定元素。对于可以复用的组件可以将引用的样式附在组件的 theme
属性上,当调用组件时传入 theme
会使用传入的样式文件名称。
import { Component } from "@qnpm/yis";
import { View } from '@qnpm/yis/components';
import styles from "../main.css";
import classnames from "classnames";
export default class Navigation extends Component {
displayName = "Navigation";
theme = styles;
handleClick(indx) {
this.props.removeNavigation(indx);
}
render() {
const theme = this.theme;
return (
<div className={theme.navigation}>
{this.props.data.map(item => (
<View
className={theme["navigation-item"]}
onTouchTap={this.handleClick.bind(this, item.index)}
key={item.index}
index={item.index}
>
<div
className={classnames(theme.img, "iconfont")}
dangerouslySetInnerHTML={{ __html: item.icon }}
/>
<div className={theme.text}>{item.text}</div>
</View>
))}
</div>
);
}
}