Appearance
指令转换器
¥Directives transformer
适用于 @apply
、@screen
和 theme()
指令的 UnoCSS 转换器:@unocss/transformer-directives
。
¥UnoCSS transformer for @apply
, @screen
and theme()
directives: @unocss/transformer-directives
.
安装
¥Installation
bash
pnpm add -D @unocss/transformer-directives
bash
yarn add -D @unocss/transformer-directives
bash
npm install -D @unocss/transformer-directives
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
export default defineConfig({
// ...
transformers: [
transformerDirectives(),
],
})
用法
¥Usage
@apply
css
.custom-div {
@apply text-center my-0 font-medium;
}
将转变为:
¥Will be transformed to:
css
.custom-div {
margin-top: 0rem;
margin-bottom: 0rem;
text-align: center;
font-weight: 500;
}
--at-apply
为了与 vanilla CSS 兼容,你可以使用 CSS 自定义属性来替换 @apply
指令:
¥To be compatible with vanilla CSS, you can use CSS custom properties to replace the @apply
directive:
css
.custom-div {
--at-apply: text-center my-0 font-medium;
}
默认情况下启用此功能并带有一些别名,你可以通过以下方式配置或禁用:
¥This feature is enabled by default with a few aliases, that you can configure or disable via:
js
transformerDirectives({
// the defaults
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
// or disable with:
// applyVariable: false
})
添加引号
¥Adding quotes
要使用 :
的规则,你必须引用整个值:
¥To use rules with :
, you will have to quote the whole value:
css
.custom-div {
--at-apply: "hover:text-red hover:font-bold";
/* or */
@apply 'hover:text-red hover:font-bold';
}
在 @apply
之后使用引号是可选的,以满足某些格式化程序的行为。
¥Using quotes after @apply
is optional, to meet the behavior of some formatters.
@screen
@screen
指令允许你创建通过名称引用断点的媒体查询,该指令来自 theme.breakpoints
。
¥The @screen
directive that allows you to create media queries that reference your breakpoints by name comes from theme.breakpoints
.
css
.grid {
--uno: grid grid-cols-2;
}
@screen xs {
.grid {
--uno: grid-cols-1;
}
}
@screen sm {
.grid {
--uno: grid-cols-3;
}
}
/* ... */
...
将转变为:
¥Will be transformed to:
css
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
.grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ... */
断点变体支持
¥Breakpoint variant support
@screen
还支持 lt
、at
变体:
¥@screen
also supports lt
、at
variants:
@screen lt-
css
.grid {
--uno: grid grid-cols-2;
}
@screen lt-xs {
.grid {
--uno: grid-cols-1;
}
}
@screen lt-sm {
.grid {
--uno: grid-cols-3;
}
}
/* ... */
将转变为:
¥Will be transformed to:
css
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 319.9px) {
.grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (max-width: 639.9px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ... */
@screen at-
css
.grid {
--uno: grid grid-cols-2;
}
@screen at-xs {
.grid {
--uno: grid-cols-1;
}
}
@screen at-xl {
.grid {
--uno: grid-cols-3;
}
}
@screen at-xxl {
.grid {
--uno: grid-cols-4;
}
}
/* ... */
将转变为:
¥Will be transformed to:
css
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) and (max-width: 639.9px) {
.grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 1280px) and (max-width: 1535.9px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1536px) {
.grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ... */
theme()
使用 theme()
函数通过点表示法访问主题配置值。
¥Use the theme()
function to access your theme config values using dot notation.
css
.btn-blue {
background-color: theme('colors.blue.500');
}
将被编译为:
¥Will be compiled to:
css
.btn-blue {
background-color: #3b82f6;
}
许可
¥License