style-vars
v1.0.5
Published
设计一些常用的less变量和js样式变量
Downloads
2
Readme
css-variables
介绍
css-variables 能够帮助团队进行设计与开发。 它能让设计的语义更加容易理解,当更换设计师时,也能使设计的产出更加一致,对于前端来说还原度也能提升很多。
styleVars 总览
颜色
| 简介 | vars | 设计值 | 样式 | js变量 | className | less 变量 | | ---- | ---- | -----: | :--- | ------ | --------- | --------- | | 错误色 | color-error | #FF192D | | colorError | cv-bgc-error cv-c-error | @color-error | | 成功色 | color-success | #00BF7F | | colorSuccess | cv-bgc-success cv-c-success | @color-success | | 主要色 | color-primary | #222222 | | colorPrimary | cv-bgc-primary cv-c-primary | @color-primary | | 信息主色 | color-info-primary | #666666 | | colorInfoPrimary | cv-bgc-info-primary cv-c-info-primary | @color-info-primary | | 信息次色 | color-info-sub | #999999 | | colorInfoSub | cv-bgc-info-sub cv-c-info-sub | @color-info-sub | | 信息弱色 | color-info-weak | #cccccc | | colorInfoWeak | cv-bgc-info-weak cv-c-info-weak | @color-info-weak | | 填充主色 | color-fill-primary | #eeeeee | | colorFillPrimary | cv-bgc-fill-primary cv-c-fill-primary | @color-fill-primary | | 填充次色 | color-fill-sub | #F5F6FA | | colorFillSub | cv-bgc-fill-sub cv-c-fill-sub | @color-fill-sub |
弹窗宽度
| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号宽 | width-modal-sm | 416px | widthModalSm | cv-w-modal-sm | @width-modal-sm | | 基础宽 | width-modal-base | 560px | widthModalBase | cv-w-modal-base | @width-modal-base | | 大号宽 | width-modal-lg | 800px | widthModalLg | cv-w-modal-lg | @width-modal-lg |
单元格宽度
| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 微小宽 | width-cell-xs | 88px | widthCellXs | cv-w-cell-xs | @width-cell-xs | | 小号宽 | width-cell-sm | 144px | widthCellSm | cv-w-cell-sm | @width-cell-sm | | 中小宽 | width-cell-md | 200px | widthCellMd | cv-w-cell-md | @width-cell-md | | 中等宽 | width-cell-base | 256px | widthCellBase | cv-w-cell-base | @width-cell-base | | 大号宽 | width-cell-lg | 368px | widthCellLg | cv-w-cell-lg | @width-cell-lg |
侧边栏宽度
| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号宽 | width-sidebar-sm | 128px | widthSidebarSm | cv-w-sidebar-sm | @width-sidebar-sm |
间距宽度
| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号2xs | space-2xs | 4px | space2xs | cv-(m|mt|mr|mb|ml)-2xs cv-(p|pt|pr|pb|pl)-2xs | @space-2xs | | 小号xs | space-xs | 8px | spaceXs | cv-(m|mt|mr|mb|ml)-xs cv-(p|pt|pr|pb|pl)-xs | @space-xs | | 小号 | space-sm | 12px | spaceSm | cv-(m|mt|mr|mb|ml)-sm cv-(p|pt|pr|pb|pl)-sm | @space-sm | | 基础 | space-base | 16px | spaceBase | cv-(m|mt|mr|mb|ml)-base cv-(p|pt|pr|pb|pl)-base | @space-base | | 大号 | space-lg | 24px | spaceLg | cv-(m|mt|mr|mb|ml)-lg cv-(p|pt|pr|pb|pl)-lg | @space-lg |
字号大小
| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号 | font-size-sm | 12px | fontSizeSm | cv-fz-sm | @font-size-sm | | 基础 | font-size-base | 14px | fontSizeBase | cv-fz-base | @font-size-base | | 大号 | font-size-lg | 16px | fontSizeLg | cv-fz-lg | @font-size-lg | | 大号xl | font-size-xl | 20px | fontSizeXl | cv-fz-xl | @font-size-xl | | 大号2xl | font-size-2xl | 24px | fontSize2xl | cv-fz-2xl | @font-size-2xl |
简写速查表
| 简写 | 全拼 | | ------ | ---- | | c | color| | w | width| | m | margin| | mt | margin-top| | mr | margin-right| | mb | margin-bottom| | ml | margin-left| | p | padding| | pt | padding-top| | pr | padding-right| | pb | padding-bottom| | pl | padding-left| | bgc | background-color| | fz | font-size|
安装
使用 NPM 在项目中安装:
npm install style-vars
设计变量包提供了 3 种形式供项目使用:
JS 变量 CSS className Less 变量
使用 JS 变量
import styleVars from 'style-vars';
<Form.Item name="way" style={{ marginTop: styleVars.spaceSm }}>
<Select
placeholder="请选择"
style={{ maxWidth: styleVars.widthModalSm }}
options={[]}
/>
</Form.Item>
React中使用css className 变量
import 'style-vars/es/css/index.css';
<div className='cv-mt-sm'></div>
使用 Less 变量
import 'style-vars/es/less/index.less';
.yourClassName {
font-size: @font-size-sm;
}
在 Vue 项目中使用
<template>
<div class='cv-mt-sm'></div>
</template>
<style lang="less" scoped>
import 'style-vars/es/less/index.less';
.yourClassName {
font-size: @font-size-sm;
}
</style>
智能提示
1、对于 JS 变量,VSCode 可以智能提示变量名,无需安装插件。 2、对于 CSS className,需要安装 IntelliSense for CSS class names in HTML 插件 3、对于 Less 变量,需要安装 Less IntelliSense 插件。进入插件设置页,将 "LESS: Scanner Exclude" 配置项中的 "**/node_modules" 规则删除