@ackl/postcss-logical 中文文档教程

Question

:warning: 这个 postcss-logical 分支已经被修改以在 jsx 文件和 postcss8 中使用 stylis 类型的预处理器语法 您可能正在寻找来自 csstools

PostCSS Logical Properties and Values

PostCSS 逻辑属性和值 让您使用逻辑，而不是 CSS 中的物理、方向和尺寸映射，遵循 CSS 逻辑属性和值 规范。

.banner {
  color: #222222;
  inset: logical 0 5px 10px;
  padding-inline: 20px 40px;
  resize: block;
  transition: color 200ms;
}

/* becomes */

.banner:dir(ltr) {
  padding-left: 20px;
  padding-right: 40px;
}

.banner:dir(rtl) {
  padding-right: 20px;
  padding-left: 40px;
}

.banner {
  resize: vertical;
  transition: color 200ms;
}

/* or, when used with { dir: 'ltr' } */

.banner {
  color: #222222;
  top: 0;
  left: 5px;
  bottom: 10px;
  right: 5px;
  padding-left: 20px;
  padding-right: 40px;
  resize: vertical;
  transition: color 200ms;
}

/* or, when used with { preserve: true } */

.banner:dir(ltr) {
  padding-left: 20px;
  padding-right: 40px;
}

.banner:dir(rtl) {
  padding-right: 20px;
  padding-left: 40px;
}

.banner {
  color: #222222;
  top: 0;
  left: 5px;
  bottom: 10px;
  right: 5px;
  inset: logical 0 5px 10px;
  padding-inline: 20px 40px;
  resize: block;
  resize: vertical;
  transition: color 200ms;
}

这些速记属性默认设置物理属性的值。 在属性值的开头指定 logical 键盘将 之后将流相关值转换为物理 LTR 和 RTL properties：

Logical Borders

• border, border-block, border-block-start, border-block-end, border-inline, border-inline-start, border-inline-end, border-start, border-end, border-color, border-block-color, border-block-start-color, border-block-end-color, border-inline-color, border-inline-start-color, border-inline-end-color, border-start-color, border-end-color, border-style, border-block-style, border-block-start-style, border-block-end-style, border-inline-style, border-inline-start-style, border-inline-end-style, border-start-style, border-end-style, border-width, border-block-width, border-block-start-width, border-block-end-width, border-inline-width, border-inline-start-width, border-inline-end-width, border-start-width, border-end-width, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

Logical Offsets

• inset, inset-block, inset-block-start, inset-block-end, inset-inline, inset-inline-start, inset-inline-end, inset-start, inset-end

Logical Margins

• margin, margin-block, margin-block-start, margin-block-end, margin-inline, margin-inline-start, margin-inline-end, margin-start, margin-end

Logical Paddings

• padding, padding-block, padding-block-start, padding-block-end, padding-inline, padding-inline-start, padding-inline-end, padding-start, padding-end

Logical Sizes

• block-size, max-block-size, min-block-size, inline-size, max-inline-size, min-inline-size

Flow-Relative Values

• clear: inline-start, clear: inline-end, float: inline-start, float: inline-end, text-align: start, text-align: end

---

默认情况下，PostCSS Logical Properties and Values 创建后备选择器 在您的 HTML 中至少需要一个 [dir] 属性。 如果你没有 任何 [dir] 属性，请考虑使用以下 JavaScript：

// force at least one dir attribute (this can run at any time)
document.documentElement.dir = document.documentElement.dir || "ltr";

否则，请考虑使用 dir 选项来转换所有逻辑属性 和特定方向的价值。

require("postcss-logical")({
  dir: "ltr",
});

Usage

添加 PostCSS 逻辑属性和值 到您的项目：

npm install postcss-logical --save-dev

使用 PostCSS 逻辑属性和值 来处理你的 CSS：

const postcssLogical = require("postcss-logical");

postcssLogical.process(YOUR_CSS /*, processOptions, pluginOptions */);

或者将它用作 PostCSS 插件：

const postcss = require("postcss");
const postcssLogical = require("postcss-logical");

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

< a href="https://github.com/csstools/postcss-logical">PostCSS Logical Properties and Values 在所有 Node 环境中运行，具有 特殊说明：

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

dir

dir 选项决定了如何向 CSS 添加定向回退。 默认情况下，回退用嵌套的 :dir 替换逻辑声明 伪类。 如果 dir 被定义为 ltr 或 rtl 那么只有左边或 正确的方向回退将取代逻辑声明。 如果 preserve 定义为true，则dir 选项将被忽略。

preserve

preserve 选项确定是否应添加定向回退 在逻辑声明之前而不替换它们。 默认情况下，定向 后备替换逻辑声明。 如果 preserve 定义为 true，则 dir 选项将被忽略。

[gulp postcss]: https://github.com/postcss/gulp-postcss [咕噜 postcss]: https://github.com/nDmitry/grunt-postcss [postcss 加载器]：https://github.com/postcss/postcss-loader