还在手写 css? css自动生成插件了解一下

时间 2020-06-14

标签还在手写 css 自动生成插件了解一下栏目 CSS 繁體版

原文原文链接

效果图

如何使用

安装依赖

npm install css-generator-plugin -D
 yarn add css-generator-plugin -D
复制代码

代码提示

如需提示可下载 genSnippets/css/snippets.csscss

webpack启动

const CssGeneratorPlugin = require('css-generator-plugin')
{
  // ... config settings here ...
  plugins: [
    new CssGeneratorPlugin({
      colors: {
        red: '#f00',
        white: '#fff',
        black: '#000',
        blue: '#00f',
        transparent: 'transparent',
      }, // 可选项。颜色配置，内置包含以上默认值
      dirPath: 'src', // 必填项。源码根目录(必须存在此目录)
      generate: 'src/style/auto.css', // 必填项。生成文件位置(不存在会自动建立目录)
      type: 'vue', // 必填项。项目类型 vue|d-mini-program
      unit: 'px', // 可选项。默认单位
      important: true // 可选项。默认为true。css是否添加！important
    })
  ]
};
复制代码

命令行启动(如小程序类和老项目，无webpack)

项目根目录配置css.generator.config.js/css.generator.config.json(文件名固定)

module.exports = {
  colors: {}, // 可选项。颜色配置，内置包含以上默认值
  dirPath: 'src', // 必填项。源码根目录(必须存在此目录)
  generate: 'src/style/auto.css', // 必填项。生成文件位置(不存在会自动建立目录)
  type: 'vue', // 必填项。项目类型 vue|d-mini-program
  unit: 'px', // 可选项。默认单位
  important: true // 可选项。默认为true。css是否添加！important
}
复制代码

运行指令(建议配置到package.json的scripts)

npm run css-generator-plugin
复制代码

入口文件(main.js)手动引入动态生成的css

import '@/style/auto.css'
复制代码

规则约定

简写约定

+ m is margin
+ p is padding
+ h is height
+ w is width
复制代码

方向约定 trblxy

+ y表明上下tb x表明左右lr组合方向
+ tblr表明上下左右单方向
+ 权重优先级 tblr单项 > xy双向组合 > 四项组合
复制代码

伪类约定

+ 属性名后跟-(hover|link|visited|active|focus|focus-within)伪类，自动生成伪类选择器
+ 目前仅颜色类支持
复制代码

数值约定

+ m-16  16表明正数
+ m-m-16 -m-16表明负数(部分属性支持)
+ 数值所有不支持小数
复制代码

单位约定

+ p为百分比%的缩写。默认不传为px
复制代码

const UNIT_ENMU = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', 'p']
const UNIT_ENMU_STR = UNIT_ENMU.join('|')
复制代码

属性约定

+ 大部分属性符合key-value形式，部分属性会兼容简写，如dispaly-flex / d-flex
+ 部分属性为经常使用组合属性，如正方形 square-80(width:80px;height:80px) flex-center-center等
复制代码

详情以下

宽或高

(w|h)-(数值)(单位)?

.w-10p{width:10%}
.w-375{width:375px}
复制代码

new RegExp(`^[wh]-(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

最大(小)宽(高)

(min|max)-(h|w)-(数值)(单位)?

.max-w-100 {max-width:100px;}
.min-w-300rem {min-width:300rem;}
.max-h-100vh {max-height:100vh}
复制代码

new RegExp(`^(min|max)-[wh]-(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

正方形简写

square-(数值)(单位)?

.w-10p{width:10%} 
.w-375{width:375px}
.square-80{width:80px;height:80px}
复制代码

new RegExp(`^square-(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

内外间距

(m|p)-(方向-)?(m-)?(数值)(单位)?

.m-16 {margin:16px}
.m-b-32rem{margin-bottom:32rem}
.m-x-m-22rem {margin-left:-22rem;margin-right:-22rem;}
.p-x-24{padding-left:24px;padding-right:24px}
复制代码

new RegExp(`^[mp]-(([trblxy])-)?(m-)?(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

图层高度

z-index-(m-)?(数值)

.z-index-9{z-index:9}
.z-index-m-9{z-index:-9}
复制代码

/^z-index-(m-)?(0|[1-9]\d*)$/
复制代码

flex 系数

flex-(数值|参数)

.flex-1{flex:1}
.flex-none{flex:none}
.flex-auto{flex:auto}
复制代码

/^flex-(null|auto|(0|[1-9]\d*))$/
复制代码

flex组合属性

flex-(主轴参数|可简写)-(交叉轴参数)

.flex-space-between-center {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.flex-center-center {
  display:flex;
  justify-content:center;
  align-items:center;
}
复制代码

new RegExp(`^flex-(${JUSTIFY_CONTENT_ENMU_STR})-(${ALIGN_ITEMS_ENMU_STR})$`)
复制代码

flex主轴

justify-content-(主轴参数|可简写)

.justify-content-space-between {justify-content:space-between;}
复制代码

new RegExp(`^justify-content-(${JUSTIFY_CONTENT_ENMU_STR})$`)
复制代码

flex交叉轴

align-items-(交叉轴参数)

.align-items-center {align-items:center}
复制代码

new RegExp(`^align-items-(${ALIGN_ITEMS_ENMU_STR})$`)
复制代码

flex轴方向

(flex-direction|flex)-(轴方向参数)

.flex-direction-column{ flex-direction:column; }
.flex-column{ flex-direction:column; }
复制代码

/^(flex-direction|flex)-(row|row-reverse|column|column-reverse)$/
复制代码

文字水平对齐

(text-align|text)-(参数)

.text-align-center {text-align:center}
.text-center {text-align:center}
复制代码

/^(text-align|text)-(start|end|left|right|center|justify|match-parent)$/
复制代码

行高

(lh|line-height)-(((数值)(单位)?)|参数)

.lh-14{line-height:14px;}
.lh-normal{line-height:normal;}
.line-height-14rem{line-height:14rem;}
复制代码

new RegExp(`^(lh|line-height)-(((0|[1-9]\\d*)(${UNIT_ENMU_STR})?)|normal|unset|inherit|initial)$`)
复制代码

定位

position-(定位参数)

.position-relative{position:relative}
复制代码

/^position-(static|relative|sticky|unset|absolute|fixed|inherit|initial)$/
复制代码

方向定位

(方向[trbl])-(m-)?-(数值)(单位)?

.position-relative{position:relative}
复制代码

new RegExp(`^[trbl]-(m-)?(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

字体大小

(font-size|fs)-(数值)(单位)?

.fs-22{font-size:22px}
.font-size-22rem{font-size:22rem}
复制代码

new RegExp(`^(font-size|fs)-(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

字体粗细

(font-weight|fw)-(参数)

.fw-bolder{font-weight:bolder}
.font-weight-300{font-weight:300}
.fw-900{font-weight:900}
复制代码

new RegExp(`^(font-size|fs)-(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

鼠标样式

cursor-(参数)

.cursor-point{cursor:point;}
复制代码

new RegExp(`^cursor-(${CURSOR_ENMU_STR})$`)
复制代码

文字折叠

word-break-(参数)

.word-break-break-all{word-break:break-all}
复制代码

/^word-break-(normal|break-all|keep-all|break-word|inherit|initial|unset)$/
复制代码

display

(display|d)-(参数)

.display-none{display:none}
.d-flex{display:flex}
复制代码

/^(display|d)-(none|inline|block|inline-block|flex)$/
复制代码

overflow

overflow-(xy)?-(参数)

.overflow-x-hidden{overflow-x:hidden;}
.overflow-auto{overflow:auto;}
复制代码

/^overflow(-[xy])?-(hidden|auto|visible|scroll|inherit)$/
复制代码

颜色相关

自带 white transparent blue black 可进行配置

new RegExp(
  `^(color|c|text|bg|background|border-color|border-c)-((hover|link|visited|active|focus|focus-within)-)?([a-fA-F0-9]{6}|[a-fA-F0-9]{3}|${getColorsKey().join('|')})(-([1-9]\\d|100))?$`
复制代码

字体颜色

(color|c|text)-(伪类-)?(16进制色[6位或3位]|自定义颜色)(-透明度)?

.c-red{color:rgba(255,0,0,1)}
.color-43ad7f-25{color:rgba(67,173,127,0.25)}
.text-hover-f243fa-1:hover{color:rgba(242, 67, 250,0.1)}
复制代码

背景色

(bg|background)-(伪类-)?(16进制色[6位或3位]|自定义颜色)(-透明度)?

.bg-black-35{background:rgba(0,0,0,0.35)}
.background-active-43ad7f-35:active{background:rgba(67,173,127,0.35)}
复制代码

边框色

(border-color|border-c)-(伪类-)?(16进制色[6位或3位]|自定义颜色)(-透明度)?

.border-c-black-35{border-color:rgba(0,0,0,0.35)}
.border-color-active-43ad7f-35:active{border-color:rgba(67,173,127,0.35)}
复制代码

字间距

letter-spacing-(数值)(单位)?

.letter-spacing-4{letter-spacing:4px}
.letter-spacing-4rem{letter-spacing:4rem}
复制代码

new RegExp(`^letter-spacing-(m-)?(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

组合属性 circle

circle 只有一个

.circle{border-radius:50%;}
复制代码

/^circle$/
复制代码

flex缩放

flex-(shrink|grow)-(数值|参数)

.flex-grow-1{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.flex-shrink-initial{flex-shrink:initial}
复制代码

/^flex-(shrink|grow)-((0|[1-9]\d*)|initial|inherit)$/
复制代码

flex占用轴空间

flex-basis-((数值(单位)?)|其余参数)

.flex-basis-20p{flex-basis:20%}
.flex-basis-20{flex-basis:20px;}
.flex-basis-auto{flex-basis:auto;}
复制代码

new RegExp(`^flex-basis-((0|[1-9]\\d*)(${UNIT_ENMU_STR})?|initial|inherit|auto)$`)
复制代码

边框宽度自带实线黑色

(border|border-width|border-w)-(方向-)?(数值)(单位)?

.border-2{
  border-width: 2px; 
  border-style: solid; 
  border-color: black;
}
.border-w-x-2em{
  border-width: 2em; 
  border-style: solid; 
  border-color: black;
}
复制代码

new new RegExp(`^(border|border-width|border-w)-([trblxy]-)?(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

边框圆角

(border-radius|br)-(数值)(单位)?

.border-radius-4{border-radius:4px}
.br-20p{border-radius:20%}
复制代码

new RegExp(`^(border-radius|br)-(0|[1-9]\\d*)(${UNIT_ENMU_STR})?$`)
复制代码

边框类型

border-style-(参数)

.border-style-dashed{border-style:dashed}
复制代码

/^border-style-(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit)$/
复制代码

text-align-last

text-align-(参数)

.text-align-last-right{text-align-last:right;}
复制代码

/^(text-align-last|text-last)-(auto|left|right|center|justify|start|end|initial|inherit)$/
复制代码

文本修饰

(text-decoration|text)-(参数)

.text-decoration-underline{text-decoration:underline}
.text-overline{text-decoration:overline}
复制代码

/^(text-decoration|text)-(none|underline|overline|line-through|blink|inherit)$/
复制代码

鼠标选择

(user-)?select-(参数)

.user-select-none{user-select:none}
.select-none{user-select:none}
.select-auto{user-select:auto}
复制代码

/^(user-)?select-(none|auto|text|all|contain|element)$/
复制代码

文字超出换行

(text-ellipsis|ellipsis)(-num)?

.ellipsis {
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
  }
.ellipsis-2 {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.text-ellipsis-2 {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
复制代码

regExp: /^(text-)?ellipsis-[1-9]\d*$/
复制代码

喜欢请 start forkvue