λ²μ 3.11.1μ μ¬μ©νμ¬ λ€μ νμΌμ λν μμ€ λ§΅μ μμ±ν λ
.example {
display: grid;
transition: all 0.5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
<strong i="6">@color</strong>: "blue";
#my-div {
color: @color;
}
λ Έλ μ€ν¬λ¦½νΈμμ λ€μ λͺ λ Ήμ μ¬μ©νμ¬
less.render(lessFileContents, { sourceMap: { sourceMapFileInline: false } })
.then(function (output) {},
κ·Έλ° λ€μ μμ€ λ§΅μ λ³΄κ³ https://sokra.github.io/source-map-visualization/#custom λꡬμμ μ€νν©λλ€.
{"version":3,"sources":["input"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,YAAY,wCAAZ;;AAKF;EACE,OAHM,MAGN"}
}μ λν 맀νμ΄ μμ΄μΌ νλ μ΄ λ 맀ν wCAAZ;;AAKF μ¬μ΄μ λΉ μ€μ λ³Ό μ μμ΅λλ€. μ΄κ²μ μμ±λ λ§΅μ΄ μλ³Έ Less νμΌλ‘ λμκ°λ λ° μ¬μ©νλ μ€κ° λ¨κ³μΈ μμ€ λ§΅μ λ§λ€ λ λ¬Έμ κ° λ©λλ€.
μ λ°μ΄νΈλ‘ Stylusμ node-sassλ₯Ό μλνμ§λ§ λͺ¨λ μμ±λ νμΌμ λ«λ κ΄νΈμ λν 맀νμ΄ μλ νμΌλ‘ λμμ€μ§ μμμ΅λλ€. μ΄κ²μ μΌλ°μ μΈ μ μ²λ¦¬κΈ°μ νκ³μΌκΉμ?
κ°λ¨ν λλ΅μ Less(νμ¬)μλ μμ€ μμλ§ μΆμ νκ³ μμ€ λμ μΆμ νμ§ μλ λ§€μ° κ°λ¨ν νμκ° μλ€λ κ²μ λλ€. λλΆλΆ μμ€ λ§΅μ΄ κ°λ μ΄ λκΈ° μ μ μμ±λμκΈ° λλ¬Έμ λλ€.
μ λ 4.xμ©μΌλ‘ Chevrotain μ μ¬μ©νμ¬ Less νμλ₯Ό μ²μλΆν° λ€μ μμ±νμΌλ©° μλΉν μμ μμ μ μννμ§λ§ μ¬μ μ§μ μμ΄(μΌλͺ Open Collective ) μ€μ λ‘ μμ λ§ ν μ μμ΅λλ€. μ νλ μμ μκ°μ. μ§κΈλ νκ³ μΆμ§λ§ μκ°μ΄ μ’ κ±Έλ¦΄ μ μμ΅λλ€.
λΉ λ₯Έ μλ΅μ κ°μ¬λ립λλ€. Illμ κΈμμΌμ μ΄λ¦° μ§λ¨μ κΈ°μ¬ν©λλ€. λλ κ·Έκ²μ΄ λ―Έλμ λμ¨λ€λ κ²μ μκ³ μκΈ° λλ¬Έμ μλ‘μ΄ νμμ λν΄ ν₯λΆνκ³ μμ΅λλ€. μ λ μκ° κΈ°κ³ μλ‘ λ±λ‘νκ³ Meteor Slack μ±λκ³Ό LinkedInμμ λ°ννμ΅λλ€. μμΌλ‘λ LESSμ λν μ§μ§λ₯Ό λͺ¨μ μ μλλ‘ λ Έλ ₯νκ² μ΅λλ€. λ΄κ° κ°μ₯ μ’μνλ νλ‘μ νΈ μ€ νλμ λλ€.
Lessκ° κ΅μ₯νλ€κ³ λ§νκ³ μΆμμ΅λλ€.
μ΄ λ¬Έμ λ μ΅κ·Ό νλμ΄ μμκΈ° λλ¬Έμ μλμΌλ‘ μ€λλ κ²μΌλ‘ νμλμμ΅λλ€. λ μ΄μ νλμ΄ μμΌλ©΄ νμλ©λλ€. κ·νμ κΈ°μ¬μ κ°μ¬λ립λλ€.
κ°μ₯ μ μ©ν λκΈ
Lessκ° κ΅μ₯νλ€κ³ λ§νκ³ μΆμμ΅λλ€.