Utilities
直接值
将一个静态数字传给长度或数值属性。
本页内容
类
| 类 | 声明 |
|---|---|
m(<number>) | margin: calc(<number> * 1px); |
p(<number>) | padding: calc(<number> * 1px); |
gap(<number>) | gap: calc(<number> * 1px); |
w(<number>) | width: calc(<number> * 1px); |
h(<number>) | height: calc(<number> * 1px); |
r(<number>) | border-radius: calc(<number> * 1px); |
b(<number>) | border-width: calc(<number> * 1px); |
grow(<number>) | flex-grow: <number>; |
shrink(<number>) | flex-shrink: <number>; |
order(<integer>) | order: <integer>; |
其他 90 个函数
| 类 | 声明 |
|---|---|
mt(<number>) | margin-top: calc(<number> * 1px); |
mr(<number>) | margin-right: calc(<number> * 1px); |
mb(<number>) | margin-bottom: calc(<number> * 1px); |
ml(<number>) | margin-left: calc(<number> * 1px); |
mx(<number>) | margin-inline: calc(<number> * 1px); |
mxs(<number>) | margin-inline-start: calc(<number> * 1px); |
mxe(<number>) | margin-inline-end: calc(<number> * 1px); |
my(<number>) | margin-block: calc(<number> * 1px); |
mys(<number>) | margin-block-start: calc(<number> * 1px); |
mye(<number>) | margin-block-end: calc(<number> * 1px); |
pt(<number>) | padding-top: calc(<number> * 1px); |
pr(<number>) | padding-right: calc(<number> * 1px); |
pb(<number>) | padding-bottom: calc(<number> * 1px); |
pl(<number>) | padding-left: calc(<number> * 1px); |
px(<number>) | padding-inline: calc(<number> * 1px); |
pxs(<number>) | padding-inline-start: calc(<number> * 1px); |
pxe(<number>) | padding-inline-end: calc(<number> * 1px); |
py(<number>) | padding-block: calc(<number> * 1px); |
pys(<number>) | padding-block-start: calc(<number> * 1px); |
pye(<number>) | padding-block-end: calc(<number> * 1px); |
scroll-m(<number>) | scroll-margin: calc(<number> * 1px); |
scroll-mt(<number>) | scroll-margin-top: calc(<number> * 1px); |
scroll-mr(<number>) | scroll-margin-right: calc(<number> * 1px); |
scroll-mb(<number>) | scroll-margin-bottom: calc(<number> * 1px); |
scroll-ml(<number>) | scroll-margin-left: calc(<number> * 1px); |
scroll-mx(<number>) | scroll-margin-inline: calc(<number> * 1px); |
scroll-mxs(<number>) | scroll-margin-inline-start: calc(<number> * 1px); |
scroll-mxe(<number>) | scroll-margin-inline-end: calc(<number> * 1px); |
scroll-my(<number>) | scroll-margin-block: calc(<number> * 1px); |
scroll-mys(<number>) | scroll-margin-block-start: calc(<number> * 1px); |
scroll-mye(<number>) | scroll-margin-block-end: calc(<number> * 1px); |
scroll-p(<number>) | scroll-padding: calc(<number> * 1px); |
scroll-pt(<number>) | scroll-padding-top: calc(<number> * 1px); |
scroll-pr(<number>) | scroll-padding-right: calc(<number> * 1px); |
scroll-pb(<number>) | scroll-padding-bottom: calc(<number> * 1px); |
scroll-pl(<number>) | scroll-padding-left: calc(<number> * 1px); |
scroll-px(<number>) | scroll-padding-inline: calc(<number> * 1px); |
scroll-pxs(<number>) | scroll-padding-inline-start: calc(<number> * 1px); |
scroll-pxe(<number>) | scroll-padding-inline-end: calc(<number> * 1px); |
scroll-py(<number>) | scroll-padding-block: calc(<number> * 1px); |
scroll-pys(<number>) | scroll-padding-block-start: calc(<number> * 1px); |
scroll-pye(<number>) | scroll-padding-block-end: calc(<number> * 1px); |
top(<number>) | top: calc(<number> * 1px); |
right(<number>) | right: calc(<number> * 1px); |
bottom(<number>) | bottom: calc(<number> * 1px); |
left(<number>) | left: calc(<number> * 1px); |
inset(<number>) | inset: calc(<number> * 1px); |
ix(<number>) | inset-inline: calc(<number> * 1px); |
ixs(<number>) | inset-inline-start: calc(<number> * 1px); |
ixe(<number>) | inset-inline-end: calc(<number> * 1px); |
iy(<number>) | inset-block: calc(<number> * 1px); |
iys(<number>) | inset-block-start: calc(<number> * 1px); |
iye(<number>) | inset-block-end: calc(<number> * 1px); |
col-gap(<number>) | column-gap: calc(<number> * 1px); |
row-gap(<number>) | row-gap: calc(<number> * 1px); |
border-spacing(<number>) | border-spacing: calc(<number> * 1px); |
outline-offset(<number>) | outline-offset: calc(<number> * 1px); |
shape-margin(<number>) | shape-margin: calc(<number> * 1px); |
translate(<number>) | translate: calc(<number> * 1px); |
word-spacing(<number>) | word-spacing: calc(<number> * 1px); |
size-x(<number>) | inline-size: calc(<number> * 1px); |
size-y(<number>) | block-size: calc(<number> * 1px); |
min-w(<number>) | min-width: calc(<number> * 1px); |
min-h(<number>) | min-height: calc(<number> * 1px); |
min-size-x(<number>) | min-inline-size: calc(<number> * 1px); |
min-size-y(<number>) | min-block-size: calc(<number> * 1px); |
max-w(<number>) | max-width: calc(<number> * 1px); |
max-h(<number>) | max-height: calc(<number> * 1px); |
max-size-x(<number>) | max-inline-size: calc(<number> * 1px); |
max-size-y(<number>) | max-block-size: calc(<number> * 1px); |
basis(<number>) | flex-basis: calc(<number> * 1px); |
rtl(<number>) | border-top-left-radius: calc(<number> * 1px); |
rtr(<number>) | border-top-right-radius: calc(<number> * 1px); |
rbl(<number>) | border-bottom-left-radius: calc(<number> * 1px); |
rbr(<number>) | border-bottom-right-radius: calc(<number> * 1px); |
rss(<number>) | border-start-start-radius: calc(<number> * 1px); |
rse(<number>) | border-start-end-radius: calc(<number> * 1px); |
res(<number>) | border-end-start-radius: calc(<number> * 1px); |
ree(<number>) | border-end-end-radius: calc(<number> * 1px); |
bt(<number>) | border-top-width: calc(<number> * 1px); |
br(<number>) | border-right-width: calc(<number> * 1px); |
bb(<number>) | border-bottom-width: calc(<number> * 1px); |
bl(<number>) | border-left-width: calc(<number> * 1px); |
bx(<number>) | border-inline-width: calc(<number> * 1px); |
bxs(<number>) | border-inline-start-width: calc(<number> * 1px); |
bxe(<number>) | border-inline-end-width: calc(<number> * 1px); |
by(<number>) | border-block-width: calc(<number> * 1px); |
bys(<number>) | border-block-start-width: calc(<number> * 1px); |
bye(<number>) | border-block-end-width: calc(<number> * 1px); |
outline(<number>) | outline-width: calc(<number> * 1px); |
长度函数将数字乘以 1px；grow()、shrink() 和 order() 则直接传入该数字。需要其他单位或动态值时，请使用 (margin:1rem) 这类原生声明。
数字的含义由属性决定
p(12) 生成 padding: calc(12 * 1px)，因此数字代表像素数量，不是间距尺度的键，也不是主题间距令牌的倍数。可以使用小数，例如 p(1.5)。
直接数字会转为像素长度或无单位系数
左侧数字转为像素长度。右侧数字是 flex 系数：零基准且没有内容最小尺寸限制的设置，使 1:2 分配得以单独呈现。其他基准大小或最小尺寸可能改变最终宽度。
文字说明
- 内边距示例应用实际的 p(12)，使内容到各个外缘之间恰好为 12px。蓝色标注用于显示这段内边距。
- flex 示例在宽 252px、间隙 12px 的行中，为两个 flex 基准大小与最小宽度都为零的项目分别应用 grow(1) 和 grow(2)。
- 剩余的 240px 分配为 80px 和 160px。系数仍然无单位，不是像素宽度。
- 这些比较有意控制其他条件。如果基准大小不为零，或存在内容最小尺寸，最终宽度就不一定符合扩张比例。各个函数的声明都列在文章中。
grow(1) 和 shrink(1) 是无单位的 flex 系数。扩张分配剩余空间；图中使用零基准大小且不受内容最小尺寸限制，以便单独呈现 1:2 比例。使用其他基准大小或最小尺寸时，只靠系数无法决定最终宽度。收缩分配也会考虑每个项目的 flex 基准大小。
order() 直接输出数字，但 CSS 属性要求整数。负值仍受各属性的规则限制：m(-4) 是合法的负外边距，但负内边距或负 flex 系数无法要求负的使用值。
只能传入一个静态数字。单位、var() 和算术表达式应写在原生声明中，例如 (padding:var(--panel-space))。共享的具名长度则应使用主题令牌，例如 p-card。
这些函数只设置表中列出的声明。b(1) 仍需要边框样式；top(4) 需要支持 inset 的定位方式；gap(12) 需要可应用间隙的布局。表格会区分逻辑属性与物理属性。
用法
设置精确的像素长度，并让其中一个盒子占用剩余空间。
Fixed
Grows to fill
<div class="… flex flex-wrap gap(12)"> <div class="… p(12) r(10) b(1) b-solid">Fixed</div> <div class="… grow(1) p(12) r(10) b(1) b-dashed">Grows to fill</div></div>生成的 CSS
@layer utilities { .r\(10\) { border-radius: calc(10 * 1px) } .b-dashed { border-style: dashed } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .flex { display: flex } .grow\(1\) { flex-grow: 1 } .flex-wrap { flex-wrap: wrap } .gap\(12\) { gap: calc(12 * 1px) } .p\(12\) { padding: calc(12 * 1px) }}自定义
预设使用 @utility 定义这些类。在样式表中定义相同名称即可替换原有定义。
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}全部 100 个定义
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}@utility mt(--value <number>) { margin-top: calc(var(--value) * 1px);}@utility mr(--value <number>) { margin-right: calc(var(--value) * 1px);}@utility mb(--value <number>) { margin-bottom: calc(var(--value) * 1px);}@utility ml(--value <number>) { margin-left: calc(var(--value) * 1px);}@utility mx(--value <number>) { margin-inline: calc(var(--value) * 1px);}@utility mxs(--value <number>) { margin-inline-start: calc(var(--value) * 1px);}@utility mxe(--value <number>) { margin-inline-end: calc(var(--value) * 1px);}@utility my(--value <number>) { margin-block: calc(var(--value) * 1px);}@utility mys(--value <number>) { margin-block-start: calc(var(--value) * 1px);}@utility mye(--value <number>) { margin-block-end: calc(var(--value) * 1px);}@utility p(--value <number>) { padding: calc(var(--value) * 1px);}@utility pt(--value <number>) { padding-top: calc(var(--value) * 1px);}@utility pr(--value <number>) { padding-right: calc(var(--value) * 1px);}@utility pb(--value <number>) { padding-bottom: calc(var(--value) * 1px);}@utility pl(--value <number>) { padding-left: calc(var(--value) * 1px);}@utility px(--value <number>) { padding-inline: calc(var(--value) * 1px);}@utility pxs(--value <number>) { padding-inline-start: calc(var(--value) * 1px);}@utility pxe(--value <number>) { padding-inline-end: calc(var(--value) * 1px);}@utility py(--value <number>) { padding-block: calc(var(--value) * 1px);}@utility pys(--value <number>) { padding-block-start: calc(var(--value) * 1px);}@utility pye(--value <number>) { padding-block-end: calc(var(--value) * 1px);}@utility scroll-m(--value <number>) { scroll-margin: calc(var(--value) * 1px);}@utility scroll-mt(--value <number>) { scroll-margin-top: calc(var(--value) * 1px);}@utility scroll-mr(--value <number>) { scroll-margin-right: calc(var(--value) * 1px);}@utility scroll-mb(--value <number>) { scroll-margin-bottom: calc(var(--value) * 1px);}@utility scroll-ml(--value <number>) { scroll-margin-left: calc(var(--value) * 1px);}@utility scroll-mx(--value <number>) { scroll-margin-inline: calc(var(--value) * 1px);}@utility scroll-mxs(--value <number>) { scroll-margin-inline-start: calc(var(--value) * 1px);}@utility scroll-mxe(--value <number>) { scroll-margin-inline-end: calc(var(--value) * 1px);}@utility scroll-my(--value <number>) { scroll-margin-block: calc(var(--value) * 1px);}@utility scroll-mys(--value <number>) { scroll-margin-block-start: calc(var(--value) * 1px);}@utility scroll-mye(--value <number>) { scroll-margin-block-end: calc(var(--value) * 1px);}@utility scroll-p(--value <number>) { scroll-padding: calc(var(--value) * 1px);}@utility scroll-pt(--value <number>) { scroll-padding-top: calc(var(--value) * 1px);}@utility scroll-pr(--value <number>) { scroll-padding-right: calc(var(--value) * 1px);}@utility scroll-pb(--value <number>) { scroll-padding-bottom: calc(var(--value) * 1px);}@utility scroll-pl(--value <number>) { scroll-padding-left: calc(var(--value) * 1px);}@utility scroll-px(--value <number>) { scroll-padding-inline: calc(var(--value) * 1px);}@utility scroll-pxs(--value <number>) { scroll-padding-inline-start: calc(var(--value) * 1px);}@utility scroll-pxe(--value <number>) { scroll-padding-inline-end: calc(var(--value) * 1px);}@utility scroll-py(--value <number>) { scroll-padding-block: calc(var(--value) * 1px);}@utility scroll-pys(--value <number>) { scroll-padding-block-start: calc(var(--value) * 1px);}@utility scroll-pye(--value <number>) { scroll-padding-block-end: calc(var(--value) * 1px);}@utility top(--value <number>) { top: calc(var(--value) * 1px);}@utility right(--value <number>) { right: calc(var(--value) * 1px);}@utility bottom(--value <number>) { bottom: calc(var(--value) * 1px);}@utility left(--value <number>) { left: calc(var(--value) * 1px);}@utility inset(--value <number>) { inset: calc(var(--value) * 1px);}@utility ix(--value <number>) { inset-inline: calc(var(--value) * 1px);}@utility ixs(--value <number>) { inset-inline-start: calc(var(--value) * 1px);}@utility ixe(--value <number>) { inset-inline-end: calc(var(--value) * 1px);}@utility iy(--value <number>) { inset-block: calc(var(--value) * 1px);}@utility iys(--value <number>) { inset-block-start: calc(var(--value) * 1px);}@utility iye(--value <number>) { inset-block-end: calc(var(--value) * 1px);}@utility gap(--value <number>) { gap: calc(var(--value) * 1px);}@utility col-gap(--value <number>) { column-gap: calc(var(--value) * 1px);}@utility row-gap(--value <number>) { row-gap: calc(var(--value) * 1px);}@utility border-spacing(--value <number>) { border-spacing: calc(var(--value) * 1px);}@utility outline-offset(--value <number>) { outline-offset: calc(var(--value) * 1px);}@utility shape-margin(--value <number>) { shape-margin: calc(var(--value) * 1px);}@utility translate(--value <number>) { translate: calc(var(--value) * 1px);}@utility word-spacing(--value <number>) { word-spacing: calc(var(--value) * 1px);}@utility w(--value <number>) { width: calc(var(--value) * 1px);}@utility h(--value <number>) { height: calc(var(--value) * 1px);}@utility size-x(--value <number>) { inline-size: calc(var(--value) * 1px);}@utility size-y(--value <number>) { block-size: calc(var(--value) * 1px);}@utility min-w(--value <number>) { min-width: calc(var(--value) * 1px);}@utility min-h(--value <number>) { min-height: calc(var(--value) * 1px);}@utility min-size-x(--value <number>) { min-inline-size: calc(var(--value) * 1px);}@utility min-size-y(--value <number>) { min-block-size: calc(var(--value) * 1px);}@utility max-w(--value <number>) { max-width: calc(var(--value) * 1px);}@utility max-h(--value <number>) { max-height: calc(var(--value) * 1px);}@utility max-size-x(--value <number>) { max-inline-size: calc(var(--value) * 1px);}@utility max-size-y(--value <number>) { max-block-size: calc(var(--value) * 1px);}@utility basis(--value <number>) { flex-basis: calc(var(--value) * 1px);}@utility r(--value <number>) { border-radius: calc(var(--value) * 1px);}@utility rtl(--value <number>) { border-top-left-radius: calc(var(--value) * 1px);}@utility rtr(--value <number>) { border-top-right-radius: calc(var(--value) * 1px);}@utility rbl(--value <number>) { border-bottom-left-radius: calc(var(--value) * 1px);}@utility rbr(--value <number>) { border-bottom-right-radius: calc(var(--value) * 1px);}@utility rss(--value <number>) { border-start-start-radius: calc(var(--value) * 1px);}@utility rse(--value <number>) { border-start-end-radius: calc(var(--value) * 1px);}@utility res(--value <number>) { border-end-start-radius: calc(var(--value) * 1px);}@utility ree(--value <number>) { border-end-end-radius: calc(var(--value) * 1px);}@utility b(--value <number>) { border-width: calc(var(--value) * 1px);}@utility bt(--value <number>) { border-top-width: calc(var(--value) * 1px);}@utility br(--value <number>) { border-right-width: calc(var(--value) * 1px);}@utility bb(--value <number>) { border-bottom-width: calc(var(--value) * 1px);}@utility bl(--value <number>) { border-left-width: calc(var(--value) * 1px);}@utility bx(--value <number>) { border-inline-width: calc(var(--value) * 1px);}@utility bxs(--value <number>) { border-inline-start-width: calc(var(--value) * 1px);}@utility bxe(--value <number>) { border-inline-end-width: calc(var(--value) * 1px);}@utility by(--value <number>) { border-block-width: calc(var(--value) * 1px);}@utility bys(--value <number>) { border-block-start-width: calc(var(--value) * 1px);}@utility bye(--value <number>) { border-block-end-width: calc(var(--value) * 1px);}@utility outline(--value <number>) { outline-width: calc(var(--value) * 1px);}@utility grow(--value <number>) { flex-grow: var(--value);}@utility shrink(--value <number>) { flex-shrink: var(--value);}@utility order(--value <integer>) { order: var(--value);}另见 工具类定义.