怎样提取CSS中Less公共设计变量-css教程-PHP中文网

less变量必须集中定义在独立variables.less文件中，用@import (reference)引入，命名需语义化且按依赖顺序置于文件顶部，避免嵌套重定义、硬编码断点及运行时计算。

怎样提取css中less公共设计变量

变量必须集中定义在单独文件里

Less变量不是写在哪都能用的，@color-primary这种声明必须放在一个独立的 variables.less 文件中，且不能被 @import 时带出样式（否则会污染输出 CSS）。最稳妥的方式是用 @import (reference) 引入，它只加载变量和 mixin，不生成任何 CSS。

常见错误是直接 @import "variables.less" —— 这会让 variables 文件里所有顶层规则（比如 * { margin: 0 }）也编译进最终 CSS，造成重复重置或样式冲突。

正确写法：@import (reference) "./styles/variables.less";
变量文件里只放 @xxx 声明、.mixin-name() 定义，不写选择器
Webpack + less-loader 环境下，确保配置开启 javascriptEnabled: true，否则 @import (reference) 可能失效

命名要带语义，别用颜色值或模糊词

@blue 或 @main-color 这类命名在多人协作或主题切换时很快会崩。真正可维护的变量名得说明用途和层级，比如 @color-brand-primary、@color-state-error、@spacing-layout-section。

字体大小也一样：@font-size-h2 比 @fs-24 更可靠，因为设计系统改字号时，你关心的是“二级标题”这个语义，而不是像素值本身。

避免在变量里塞 calc()，如 @spacing-md: calc(1rem * 1.5) —— Less 编译期不支持运行时计算，会报错
单位必须显式写出：@line-height-base: 1.5; 是合法的，但要用时得写 line-height: @line-height-base;，不能省略
颜色变量建议用十六进制或命名色，别用 rgb() 函数——后者无法被 darken() 等函数安全处理

响应式断点必须抽成变量，再配合 mixin 使用

硬编码 @media (max-width: 768px) 到每个组件里，等于把设计约束散落在各处。应该统一定义 @breakpoint-tablet: 768px;，然后封装成 mixin：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.responsive-sidebar() {
  width: @sidebar-width-desktop;
  @media (max-width: @breakpoint-tablet) {
    width: @sidebar-width-mobile;
  }
}

调用时直接 .responsive-sidebar();，而不是在组件里反复写媒体查询。

断点变量名要对应设备意图，比如 @breakpoint-mobile-max 比 @bp-sm 更易理解
不要试图在变量里做条件判断：@sidebar-width: if(@screen == 'mobile', 80vw, 260px) 是无效语法，Less 不支持运行时 if
所有响应式变化项（宽高、字体、边距）都该拆成两套变量 + 一套控制 mixin，而不是靠 JS 动态切类名

变量作用域容易被忽略，嵌套里不能重定义同名变量

Less 的变量查找是“从当前作用域向上找”，如果在嵌套规则里又写了 @color-primary: red;，它会覆盖外层定义，且只在该块内生效。这导致同一变量在不同组件里含义不一致。

更隐蔽的问题是：变量懒加载特性会让定义顺序影响结果。比如 @color-primary 在文件末尾才赋值，前面的 .btn { color: @color-primary; } 会取到 undefined（编译报错）或默认值（取决于 less 版本）。

所有变量必须放在文件最顶部，且按依赖顺序排列（例如 @color-brand-primary 要早于 @color-brand-secondary: lighten(@color-brand-primary, 10%)）
不要在 mixin 内部重新声明同名变量，否则会遮蔽全局变量，调用方无法感知
Vue 单文件组件中使用 <style lang="less" scoped></style> 时，@import (reference) 的变量仍可用，但需确认 loader 配置未禁用全局作用域

实际项目里最难的不是定义变量，而是让所有人遵守同一套命名和引用路径。一旦 variables.less 被分散复制、局部修改，整个设计系统就退化回 CSS 字符串拼接。