PostCSS 逻辑浮出水面并清除

npm install @csstools/postcss-logical-float-and-clear --save-dev

PostCSS 逻辑浮出水面并清除 允许您在 CSS 中使用逻辑,而不是物理、方向和维度映射,遵循 CSS 逻辑属性和值 规格.

.element {
    clear: inline-start;
    float: inline-end;
}

/* becomes */

.element {
    clear: left;
    float: right;
}

使用量

添加 PostCSS 逻辑浮出水面并清除 对您的项目:

npm install postcss @csstools/postcss-logical-float-and-clear --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');

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

选项

内含直线

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

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

postcssLogicalFloatAndClear({
    inlineDirection: 'right-to-left'
})

.element {
    clear: inline-start;
    float: inline-end;
}

/* becomes */

.element {
    clear: right;
    float: left;
}

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

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

请注意,如果 inlineDirection 变成垂直.