Less如何实现CSS内边距与外边距的统一管理_定义Spacing变量集-css教程-PHP中文网

less不支持对象式变量，因变量系统仅接受单一值且为文本替换；需用命名空间模拟键值对，并配合条件混入与方括号语法访问。

less如何实现css内边距与外边距的统一管理_定义spacing变量集

为什么直接用 `$spacing` 变量会出错？

Less 本身不支持原生的“变量集”或“映射对象”，像 Sass 的 map-get 那样直接查表取值。如果你写 $spacing: { sm: 4px, md: 8px, lg: 16px };，Less 编译器会直接报错：ParseError: expected ')' got '{'。这不是语法糖缺失的问题，而是 Less 的变量系统只接受扁平赋值——每个变量必须是一个单一值（数字、字符串、颜色等），不能是嵌套结构。

Less 的变量本质是文本替换，不是运行时对象
所有“对象式”写法（如 JSON 风格、括号包裹）都会被当作无效语法拒绝
想模拟键值对，必须靠命名约定 + 拼接规则来绕过限制

用命名空间 + 命名约定模拟 Spacing 集合

Less 支持命名空间（namespace），这是实现“伪变量集”的最稳妥方式。把所有间距值挂在一个命名空间下，既避免全局污染，又可通过点号访问，语义清晰：

.spacing {
  @sm: 4px;
  @md: 8px;
  @lg: 16px;
  @xl: 24px;
  @xxl: 32px;
}

使用时用 .spacing[@sm] 或更推荐的混入调用方式（见下一点）。注意：不能写成 .spacing.@sm —— Less 不支持这种点号访问嵌套变量，必须用方括号语法，且仅在命名空间内有效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

定义可复用的 `padding` 和 `margin` 混入

光有变量不够，得封装成易用的样式接口。下面两个混入能统一处理方向（t/r/b/l/h/v）和尺寸（sm/md…）：

.pad(@size) when (isnumber(@size)) {
  padding: @size;
}
.pad(@size) when (isstring(@size)) {
  .spacing();
  padding: .spacing[@@size];
}
<p>.mt(@size) when (isnumber(@size)) {
margin-top: @size;
}
.mt(@size) when (isstring(@size)) {
.spacing();
margin-top: .spacing[@@size];
}</p>