cssnext 目前仅支持定义全局变量，使用 :root 域定义，使用 var获取变量。
:root{
--unit: .1rem;
// ......
}
@import '../config.css';
:root {
--checkbox-field-margin-bottom: calc(0.5 * var(--checkbox-size));
--checkbox-size: calc(2.2 * var(--unit));
// ......
}
.field {
display: block;
height: var(--checkbox-size);
margin-bottom: var(--checkbox-field-margin-bottom);
line-height: var(--checkbox-size);
// ......
}
注意
全局变量存在覆盖问题， 因此变量请加上命名空间， 建议开发这变量命名规则 --self-[类别|组件]-[属性]。
YIS 内置变量这部分仅定义了用于计算的单位。
:root{
--unit: .1rem;
}
YIS 根据 Youngh Design 出了一套调色板变量，这系列变量不希望开发者更改。
了解更多关于 Young design
:root {
--palette-red-50: rgb(255, 235, 238);
--palette-red-100: rgb(255, 205, 210);
--palette-red-200: rgb(239, 154, 154);
--palette-red-300: rgb(229, 115, 115);
--palette-red-400: rgb(239, 83, 80);
--palette-red-500: rgb(244, 67, 54);
--palette-red-600: rgb(229, 57, 53);
--palette-red-700: rgb(211, 47, 47);
--palette-red-800: rgb(198, 40, 40);
--palette-red-900: rgb(183, 28, 28);
--palette-red-a100: rgb(255, 138, 128);
--palette-red-a200: rgb(255, 82, 82);
--palette-red-a400: rgb(255, 23, 68);
--palette-red-a700: rgb(213, 0, 0);
//......
}
以下是基于调色板定义的一组风格变量，一些组件的颜色变量默认值取自这里，开发者根据自己应用的需要选择覆盖。
:root{
--color-dark-contrast: var(--palette-white);
--color-light-contrast: var(--palette-black);
--color-info-error: rgba(255, 79, 95, 1);
--color-info-sucess: rgba(115, 209, 61, 1);
--color-info-link: rgba(64, 169, 255, 1);
/** 主题色 **/
--color-primary-main: rgba(84, 185, 209, 1);
--color-primary-shallow: rgba(169, 226, 235, 1);
--color-primary-deep: rgba(40, 108, 133, 1);
--color-primary-contrast: var(--font-color-main-light);
/** 强调色 **/
--color-accent-main: rgba(239, 144, 54, 1);
--color-accent-shallow: rgba(255, 202, 138, 1);
--color-accent-deep: rgba(163, 79, 20, 1);
--color-accent-contrast: var(--font-color-main-light);
--color-background: #eee;
}
YIS 根据 Youngh Design 出了一组规范字号，这系列变量不希望开发者更改。
:root{
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, sans-serif;
--font-size-root: 100px;
--font-size-body: .16rem;
--font-line-height-body: .24rem;
--font-size-display1: .56rem;
--font-line-height-display1: .84rem;
--font-size-display2: .48rem;
--font-line-height-display2: .64rem;
--font-size-headline1: .32rem;
--font-line-height-headline1: .48rem;
--font-size-headline2: .24rem;
--font-line-height-headline2: .36rem;
--font-size-headline3: .2rem;
--font-line-height-headline3: .3rem;
--font-size-title: .18rem;
--font-line-height-title: .27rem;
--font-size-footnote: .14rem;
--font-line-height-footnote: .21rem;
--font-size-caption1: .12rem;
--font-line-height-caption1: .18rem;
--font-size-caption2: .1rem;
--font-line-height-caption2: .15rem;
}
为了便于开发引用提供了多组不同使用场景的字体样式，这部分开发者可以根据应用需要谨慎更改。
:root{
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, sans-serif;
--font-title: {
font-size: var(--font-size-title);
line-height: var(--font-line-height-title);
}
--font-display1: {
font-size: var(--font-size-display1);
line-height: var(--font-line-height-display1);
}
--font-display2: {
font-size: var(--font-size-display2);
line-height: var(--font-line-height-display2);
}
--font-h1: {
font-size: var(--font-size-headline1);
line-height: var(--font-line-height-headline1);
}
--font-h2: {
font-size: var(--font-size-headline2);
line-height: var(--font-line-height-headline2);
}
--font-h3: {
font-size: var(--font-size-headline3);
line-height: var(--font-line-height-headline3);
}
--font-body: {
font-size: var(--font-size-body);
line-height: var(--font-line-height-body);
}
--font-footnote: {
font-size: var(--font-size-footnote);
line-height: var(--font-line-height-footnote);
}
--font-caption1: {
font-size: var(--font-size-caption1);
line-height: var(--font-line-height-caption1);
}
--font-caption2: {
font-size: var(--font-size-caption2);
line-height: var(--font-line-height-caption2);
}
--font-title: {
font-size: var(--font-size-title);
line-height: var(--font-line-height-title);
}
--font-color-main-dark: rgba(0,0,0, .87);
--font-color-descibe-dark: rgba(0,0,0, .54);
--font-color-disable-dark: rgba(0,0,0, .38);
--font-color-split-line-dark: rgba(0,0,0, .12);
--font-color-main-light: rgba(255,255,255, .87);
--font-color-descibe-light: rgba(255,255,255, .54);
--font-color-disable-light: rgba(255,255,255, .38);
--font-color-split-line-light: rgba(255,255,255, .12);
}
组件变量在各个 yis/components/xxx/xxx.config.css 文件中。可以查阅文档获取可以设置的变量，在应用样式文件中进行覆盖。根据应用范围可以在 page/main.css 设置，如果是通用设置 theme/xxx 并引入到页面样式文件中。
多页面复用如下
@import "../config.css";
@import "../color.css";
:root{
--header-background-color: var(--color-primary-main);
--header-border-color: var(--color-primary-main);
--header-color: var(--font-color-main-light);
--header-title-font-size: var(--font-size-title);
--header-height: 45px;
}
@import "@qnpm/yis/components/header/header.css";
:root{
--header-background-color: var(--color-primary-main);
}
.container{
height: 45px;
}
import { PageCore } from "@qnpm/yis";
import headerStyles from "$theme/header.css";
import styles from '../main.css';
class Home extends PageCore {
//......
render(){
return(
<Page>
<Header
className={styles.header_top}
theme={headerStyles}
title="仿攻略首页"
rightText="测试router"
onTapLeft={this.back}
onTapRight={() => {
YIS.APP.open("router", { from: "home" });
}}
/>
</Page>
)
}
}