在「煉金術師的入門套組」中,我們示範了如何使用 Core
模組開始工作,但重複輸入設計稿寬度可能讓你不想工作了,因此 css-gum
準備了專門客製化生成 Core
模組的 Gen
模組,我相信它一定能解決你的問題,但不能解決你不想工作的問題。
如果你不喜歡 css-gum
為 Core
模組設置的函式名,或者你不想整包塞到 postcss-functions
中,除了自己在 postcss-functions
的 functions 選項各別設置外,也許可以試試 Gen.genFuncsCore
,這是一比一生成 Core
模組的方法,並提供 nameXxx
重命名參數:
''
來刪除某個函式。import {Gen} from 'css-gum'
const {core} = Gen.genFuncsCore({
nameVw: 'aaa',
nameVwe: '',
})
console.log(core.vw) // undefined
console.log(core.aaa) // [Function: aaa]
console.log(core.aaa(10, 100)) // '10vw'
console.log(core.vwe) // undefined
console.log(core.vwc) // [Function: vwc]
console.log(core.vwc(10,100)) // 'min(10px, 10vw)'
vw
函式名改成 aaa
,所以:
core.vw
是 undefined
。core.aaa
可以執行。nameVwe
設為 ''
,所以 vwe
函式就不存在了。vwc
沒有任何變更,所以正常使用。postcss-functions
使用時,直接 { functions: core }
即可。在 Core
模組中,所有方法的預設 space
都是 0
,如果想修改預設值為 1
,Gen.genFuncsCore
中有 space
參數可以設置:
import {Gen} from 'css-gum'
const {core} = Gen.genFuncsCore({
space: 1,
})
console.log(core.vw(10,100,1).length) // 5
console.log(core.vw(10,100,0).length) // 4
console.log(core.vw(10,100).length) // 5
core.vw(10, 100, 1)
:有空格的返回 5 個字符。core.vw(10, 100, 0)
:沒空格的返回 4 個字符。core.vw(10, 100)
:返回 5 個字符,證明預設 space
改成 1
了。Gen.genFuncsDraftWidth
批量生成還記得我們在「實戰4」中做了為每一個設計稿寬度,都建立一套專屬的函式的開工前準備嗎?當時我們在每個函式後面寫個數字來代表某個設計稿寬度,以解決重複輸入設計稿寬度的問題,而該篇為兩張設計稿(1440px 與 375px)實現共六個函式:
const DESIGN_DRAFT1 = 375
const DESIGN_DRAFT2 = 1440
{
functions: {
pxToVw1: (value) => pxToVw(value, DESIGN_DRAFT1),
pxToVwClamp1: (value) => pxToVwClamp(value, DESIGN_DRAFT1),
pxToVwExtend1: (value) => pxToVwExtend(value, DESIGN_DRAFT1),
pxToVw2: (value) => pxToVw(value, DESIGN_DRAFT2),
pxToVwClamp2: (value) => pxToVwClamp(value, DESIGN_DRAFT2),
pxToVwExtend2: (value) => pxToVwExtend(value, DESIGN_DRAFT2),
},
}
Gen
模組中有個 Gen.genFuncsDraftWidth
方法,專門批量生成這些函式,並支持以下參數來實現上面這些結果:
nameXxx: string
:重命名。space: 0 | 1
:函式預設是否生成空格。points: number[]
:指定設計稿寬度。order: 'asc' | 'desc'
:
points
排序的排序規則。
order: 'asc'
:從小到大,例如 [375,1440]
,預設為 asc
。order: 'desc'
:從大到小,例如 [1440,375]
。css-gum
會依據排序生成函式編號。firstIndex: number
:
firstIndex
指的是第一個數字應為多少。0
。我們來試試根據「實戰4」的命名規則,將「煉金術師的入門套組」中的紅球範例改寫:
package.json
{
"type": "module",
"devDependencies": {
"postcss-functions": "^4.0.2",
"vite": "^7.1.4"
},
"dependencies": {
"css-gum": "^1.4.2"
}
}
postcss.config.js
import postcssFunctions from 'postcss-functions'
import {Gen} from 'css-gum'
/** @type {import('postcss-load-config').Config} */
export default {
plugins: [
postcssFunctions({
functions: Gen.genFuncsDraftWidth({
points: [375, 1440],
space: 1,
firstIndex: 1,
nameVw: 'pxToVw',
nameVwc: 'pxToVwClamp',
nameVwe: 'pxToVwExtend',
}).core,
}),
],
}
375
、1440
。firstIndex
為 1index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
.circle {
position: absolute;
top: pxToVwClamp2(862);
left: pxToVw2(-100);
width: pxToVwClamp2(200);
height: pxToVwClamp2(200);
border-radius: 50%;
background-color: #C22A29;
}
@media (width >= 1440px) {
.circle {
left: pxToVwExtend2(-100);
}
}
@media (width < 768px) {
.circle {
top: pxToVwClamp1(-25);
left: pxToVwExtend1(-25);
width: pxToVwClamp1(50);
height: pxToVwClamp1(50);
}
}
@media (width < 375px) {
.circle {
left: pxToVw1(-25);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
將「煉金術師的入門套組」紅球範例中的函式呼叫都改成我們聲明好的函式即可:
vw(?, 1440)
:pxToVw2
。vw(?, 375)
:pxToVw1
。vwc(?, 1440)
:pxToVwClamp2
。vwc(?, 375)
:pxToVwClamp1
。vwe(?, 1440)
:pxToVwExtend2
。vwe(?, 375)
:pxToVwExtend1
。結果
以上就是 Gen.genFuncsDraftWidth
方法如何幫你實現每張設計稿的開工前準備。
你也許猜到下篇我想說什麼了,沒錯!下篇我要來分享如何自動生成提升開發幸福感的快捷符文:Snippet
,那我們下篇見囉~