@fighting-design/fighting-theme
中文 | 英文
🐳 说明
Fighting Design
的主题样式目录
🦩 目录说明
├── config 组件的一些配置变量
├── src 每个组件的主样式表存放目录
├── index.scss 样式主入口文件,打包入口文件
├── package.json package.json
├── README.en-US.md README.en-US.md
└── README.md README.md
🚧 规范说明
- 在
src
目录下新建和组件名相同的*.scss
文件,进行开发组件样式表 - 在主入口
index.scss
中需要引入你新建的*.scss
文件提供使用 - 样式中禁止出现
!important
- 文件名统一使用短横杠连接,不可以出现大写字母
- 在
src/*
目录下,是对应的每一个组件的*.scss
文件 - 在
config/*
目录下,是组件的一些配置变量文件,组件的配置文件都以var-组件名.scss
进行命名。全局配置文件使用const-***.scss
命名
🐿️ 唯一样式
每个组件都会有一个唯一的样式,比如 f-button
、f-icon
等等,为避免样式发生冲突,需要严格约束其内部样式或同级样式对于其它组件的污染。
比如在 FButton
组件中,可以通过 round
属性可以配置圆角属性,那么伪代码如下:
<button
:class="[
'f-button',
{ 'f-button-round': round }
]"
>
按钮组件
</button>
因为在组件中都会有一个唯一的 class
,也就是 f-button
,那么对于 f-button__round
的属性前面,也应该加入 f-button
才可以防止样式污染。
反面例子:
.f-button {
/* */
}
.f-button__round {
border-radius: 4px;
}
正面例子:
.f-button {
/* */
}
.f-button.f-button__round {
border-radius: 4px;
}
🦄 引入
可以在全局任意地方使用下面方式引入使用
import '@fighting-design/fighting-theme'