Less.js: рд╕реЛрд░реНрд╕ рдореИрдкреНрд╕ рдореЗрдВ рдХреНрд▓реЛрдЬрд┐рдВрдЧ рдмреНрд░реИрдХреЗрдЯ рдХреЗ рд▓рд┐рдП рдХреЛрдИ рдореИрдкрд┐рдВрдЧ рдирд╣реАрдВ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 1 рдорд╛рд░реНрдЪ 2020  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: less/less.js

рдЬрдм рдореИрдВ рд╕рдВрд╕реНрдХрд░рдг 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 рдЬрд╣рд╛рдВ } рдХреЗ рд▓рд┐рдП рдореИрдкрд┐рдВрдЧ рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдПред рдпрд╣ рддрдм рдмрди рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдЬрд╛рд░реА рд╣реЛрддрд╛ рд╣реИ рдЬрдм рдЖрдк рдПрдХ рд╕реНрд░реЛрдд рдорд╛рдирдЪрд┐рддреНрд░ рдмрдирд╛ рд░рд╣реЗ рд╣реЛрддреЗ рд╣реИрдВ рдЬрд╣рд╛рдВ рдпрд╣ рдЙрддреНрдкрдиреНрди рдирдХреНрд╢рд╛ рдПрдХ рдордзреНрдпрд╡рд░реНрддреА рдЪрд░рдг рд╣реЛрддрд╛ рд╣реИ рдЬрд┐рд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдЖрдк рдореВрд▓ рдХрдо рдлрд╝рд╛рдЗрд▓ рдкрд░ рд╡рд╛рдкрд╕ рдЬрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд░ рд░рд╣реЗ рд╣реЛрддреЗ рд╣реИрдВред

рдПрдХ рдЕрджреНрдпрддрди рдХреЗ рд░реВрдк рдореЗрдВ рдореИрдВрдиреЗ рд╕реНрдЯрд╛рдЗрд▓рд╕ рдФрд░ рдиреЛрдб-рдПрд╕рдПрдПрд╕ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ рдФрд░ рдЙрди рд╕рднреА рдХреЗ рдкрд╛рд╕ рдЬреЗрдирд░реЗрдЯ рдХреА рдЧрдИ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдмрдВрдж рдмреНрд░реИрдХреЗрдЯ рдХреЗ рд▓рд┐рдП рдореВрд▓ рдлрд╝рд╛рдЗрд▓реЛрдВ рдкрд░ рд╡рд╛рдкрд╕ рдореИрдкрд┐рдВрдЧ рдирд╣реАрдВ рд╣реИред рдХреНрдпрд╛ рдпрд╣ рд╕рд╛рдорд╛рдиреНрдп рд░реВрдк рд╕реЗ рдкреВрд░реНрд╡ рдкреНрд░реЛрд╕реЗрд╕рд░ рдХреА рдПрдХ рд╕реАрдорд╛ рд╣реИ?

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдмрд╕ рдЗрддрдирд╛ рдХрд╣рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ рдХрд┐ рдХрдо рдХрдорд╛рд▓ рд╣реИ

рд╕рднреА 4 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╕рд░рд▓ рдЙрддреНрддрд░ рдпрд╣ рд╣реИ рдХрд┐ рдХрдо (рд╡рд░реНрддрдорд╛рди рдореЗрдВ) рдореЗрдВ рдПрдХ рдмрд╣реБрдд рд╣реА рд╕рд░рд▓ рдкрд╛рд░реНрд╕рд░ рд╣реИ рдЬреЛ рдХреЗрд╡рд▓ рд╕реНрд░реЛрдд рдкреНрд░рд╛рд░рдВрдн рдХреЛ рдЯреНрд░реИрдХ рдХрд░рддрд╛ рд╣реИ рдФрд░ рд╕реНрд░реЛрдд рдЕрдВрдд рдирд╣реАрдВ, рдЕрдзрд┐рдХрддрд░ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рд╕реНрд░реЛрдд рдорд╛рдирдЪрд┐рддреНрд░реЛрдВ рдХреА рдЕрд╡рдзрд╛рд░рдгрд╛ рд╕реЗ рдкрд╣рд▓реЗ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ рдерд╛ред

рдореИрдВ 4.x рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╢реЗрд╡рд░реЛрдЯреЗрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕реНрдХреНрд░реИрдЪ рд╕реЗ рдПрдХ рдХрдо рдкрд╛рд░реНрд╕рд░ рдХреЛ рдлрд┐рд░ рд╕реЗ рд▓рд┐рдЦ рд░рд╣рд╛ рд╣реВрдВ, рдФрд░ рдЗрд╕ рдкрд░ рдХрд╛рдлреА рдХрд╛рдо рдХрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рд╡рд┐рддреНрддреАрдп рд╕рд╣рд╛рдпрддрд╛ рдХреЗ рдмрд┐рдирд╛ (рдПрдХ рд▓рд╛ рдУрдкрди рдХрд▓реЗрдХреНрдЯрд┐рд╡ ), рдореИрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреЗрд╡рд▓ рдЗрд╕ рдкрд░ рдХрд╛рдо рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рд╕реАрдорд┐рдд рдЦрд╛рд▓реА рд╕рдордп рдореЗрдВред рдореЗрд░рд╛ рдЕрднреА рднреА рдЗрд░рд╛рджрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЗрд╕рдореЗрдВ рдХреБрдЫ рд╕рдордп рд▓рдЧ рд╕рдХрддрд╛ рд╣реИред

рдпрд╣ рдмрд╣реБрдд рд╕рдордЭ рдореЗрдВ рдЖрддрд╛ рд╣реИ, рддреНрд╡рд░рд┐рдд рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рдореИрдВ рд╢реБрдХреНрд░рд╡рд╛рд░ рдХреЛ рдЦреБрд▓реЗ рд╕рд╛рдореВрд╣рд┐рдХ рдореЗрдВ рдпреЛрдЧрджрд╛рди рджреЗрддрд╛ рд╣реВрдВред рдореИрдВ рдЕрдм рдирдП рдкрд╛рд░реНрд╕рд░ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЙрддреНрд╕рд╛рд╣рд┐рдд рд╣реВрдВ рдХрд┐ рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдЖ рд░рд╣рд╛ рд╣реИред рдореИрдВрдиреЗ рдорд╛рд╕рд┐рдХ рдпреЛрдЧрджрд╛рдирдХрд░реНрддрд╛ рдХреЗ рд░реВрдк рдореЗрдВ рд╕рд╛рдЗрди рдЕрдк рдХрд┐рдпрд╛ рдФрд░ рдЙрд▓реНрдХрд╛ рд╕реНрд▓реИрдХ рдЪреИрдирд▓ рдФрд░ рд▓рд┐рдВрдХреНрдбрдЗрди рдкрд░ рдПрдХ рдШреЛрд╖рдгрд╛ рдХреАред рдореИрдВ рдЖрдЧреЗ рдмрдврд╝рдиреЗ рдХреЗ рд╕рд╛рде-рд╕рд╛рде LESS рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди рдЬреБрдЯрд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рддрд╛ рд░рд╣реВрдВрдЧрд╛ред рдпрд╣ рдореЗрд░реА рдкрд╕рдВрджреАрджрд╛ рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╣реИ

рдмрд╕ рдЗрддрдирд╛ рдХрд╣рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ рдХрд┐ рдХрдо рдХрдорд╛рд▓ рд╣реИ

рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдкреБрд░рд╛рдирд╛ рдХреЗ рд░реВрдк рдореЗрдВ рдЪрд┐рд╣реНрдирд┐рдд рдХрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕рдореЗрдВ рд╣рд╛рд▓ рдХреА рдЧрддрд┐рд╡рд┐рдзрд┐ рдирд╣реАрдВ рд╣реИред рдЖрдЧреЗ рдХреЛрдИ рдЧрддрд┐рд╡рд┐рдзрд┐ рдирд╣реАрдВ рд╣реЛрдиреЗ рдкрд░ рдЗрд╕реЗ рдмрдВрдж рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред рдЖрдкрдХреЗ рдпреЛрдЧрджрд╛рдиреЛрдВ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

matthew-dean picture matthew-dean  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

dotnetwise picture dotnetwise  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

bassjobsen picture bassjobsen  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

awebdev picture awebdev  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

seven-phases-max picture seven-phases-max  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ