邪修 Less 10 连击｜循环引用、百万嵌套、运行时随机色

邪修 Less ，10 段“千万别上生产”的黑魔法代码
——仅供技术猎奇，切勿真用！

⚠️ 每条都可能：编译爆炸、性能雪崩、样式失控、同事提刀

面试炫技 OK，项目敢用就等死！

1️⃣ 自爆循环引用

@import "a.less"; // a.less 又 @import "b.less"; b.less 再 @import "a.less";

无限递归，编译器直接 OOM。

2️⃣ 变量黑洞

@a: @a + 1;
body { width: @a; } // 编译即报错，但写错时难排查

3️⃣ 百万级嵌套

.n {
  .n {
    .n { /* …嵌套100层… */ }
  }
}

生成 1 亿条 CSS 选择器，浏览器当场去世。

4️⃣ 运行时随机颜色

@rand: `Math.random()`;
.bg { background: hsl(@rand*360, 100%, 50%); }

每次编译颜色都不同，缓存全部失效。

5️⃣ 负边距黑洞

.hole { margin: -9999px; }

元素飞出可视宇宙，滚动条无限长。

6️⃣ 隐形选择器

.👻 { display: none!important; }

用 emoji 当类名，同事找不到样式来源。

7️⃣ 伪元素无限动画

body::after {
  content: "";
  position: fixed;
  animation: spin 0.001s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

全屏 1000 FPS 动画，GPU 直接烤熟。

8️⃣ 全局 * 核爆

* {
  all: unset!important;
  color: transparent!important;
}

一键清空所有样式 + 文字隐形，可访问性归零。

9️⃣ 媒体查询错位

@media (min-width: 0px) and (max-width: 99999px) {
  .col-md-6 { width: 10000px; }
}

所有屏幕都被当成巨屏，栅格系统直接崩溃。

🔟 混合 (mixin) 副作用

.evil() {
  content: ""; animation: spin 1s infinite;
}
body { .evil(); }

混入里偷偷加动画，全局样式被“暗算”。

邪修口诀

“变量当黑洞，嵌套当迷宫；

混入当炸弹，编译器哭泣。”

PS

想要正经的学习 Less，从编程狮的《Less 快速入门课程》开始！