PostCSS 逻辑调整大小

npm install @csstools/postcss-logical-resize --save-dev

PostCSS 逻辑调整大小 允许您使用逻辑值而不是物理值 resize,然后 CSS 逻辑属性和值 规格.

.resize-block {
    resize: block;
}

.resize-inline {
    resize: inline;
}

/* becomes */

.resize-block {
    resize: vertical;
}

.resize-inline {
    resize: horizontal;
}

使用量

添加 PostCSS 逻辑调整大小 对您的项目:

npm install postcss @csstools/postcss-logical-resize --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssLogicalResize = require('@csstools/postcss-logical-resize');

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

选项

块方向( I)

这个 blockDirection 财务报告和审定财务报表 inlineDirection 选项允许您指定块和内线轴的方向。 默认值为 top-to-bottom 财务报告和审定财务报表 left-to-right 这和任何拉丁语一致.

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

postcssLogicalResize({
    blockDirection: 'right-to-left',
    inlineDirection: 'top-to-bottom'
})

.resize-block {
    resize: block;
}

.resize-inline {
    resize: inline;
}

/* becomes */

.resize-block {
    resize: horizontal;
}

.resize-inline {
    resize: vertical;
}

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

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

例如,不能混合两个垂直方向或两个水平方向 top-to-bottom 财务报告和审定财务报表 right-to-left 有效,不过 top-to-bottom 财务报告和审定财务报表 bottom-to-top 没有.