邪修 Less ，10 段“千萬別上生產(chǎn)”的黑魔法代碼
——僅供技術(shù)獵奇，切勿真用！

?? 每條都可能：編譯爆炸、性能雪崩、樣式失控、同事提刀

面試炫技 OK，項目敢用就等死！

1?? 自爆循環(huán)引用

@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; }
}

所有屏幕都被當成巨屏，柵格系統(tǒng)直接崩潰。

?? 混合 (mixin) 副作用

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

混入里偷偷加動畫，全局樣式被“暗算”。

邪修口訣

“變量當黑洞，嵌套當迷宮；

混入當炸彈，編譯器哭泣。”

PS

想要正經(jīng)的學習 Less，從編程獅的《Less 快速入門課程》開始！