還在手寫 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。