PostCSS 逻辑视图端口单位

npm install @csstools/postcss-logical-viewport-units --save-dev

PostCSS 逻辑视图端口单位 让你轻松使用 vb 财务报告和审定财务报表 vi 长度单位 CSS-Values-4 规格。 。 。 .

.foo {
    margin: 10vi 20vb;
}

/* becomes */

.foo {
    margin: 10vw 20vh;
    margin: 10vi 20vb;
}

使用量

添加 PostCSS 逻辑视图端口单位 对您的项目:

npm install postcss @csstools/postcss-logical-viewport-units --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssLogicalViewportUnits = require('@csstools/postcss-logical-viewport-units');

postcss([
    postcssLogicalViewportUnits(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

内含直线

这个 inlineDirection 选项允许您指定内线轴的方向。 默认值为 left-to-right与任何拉丁语一致.

您应该调整此值, 使其适合您的语言和写作模式 .

postcssLogicalViewportUnits({
    inlineDirection: 'top-to-bottom'
})

.foo {
    margin: 10vi 20vb;
}

/* becomes */

.foo {
    margin: 10vh 20vw;
    margin: 10vi 20vb;
}

每一方向必须是以下之一:

• top-to-bottom
• bottom-to-top
• left-to-right
• right-to-left

请注意,改造不会有什么特别的 right-to-left 或者说 bottom-to-top。 。 。 .

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认保存.

postcssLogicalViewportUnits({ preserve: false })

.foo {
    margin: 10vi 20vb;
}

/* becomes */

.foo {
    margin: 10vw 20vh;
}