{"id":473655,"date":"2025-09-02T17:13:10","date_gmt":"2025-09-02T17:13:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=473655"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=473655","title":{"rendered":"<span>\u041a\u0430\u043a \u044f \u043f\u043e\u043b\u044e\u0431\u0438\u043b LESS, \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0441\u044f \u043e\u0442 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b \u0432 CSS-\u043a\u043e\u0434\u0435, \u0441\u0434\u0435\u043b\u0430\u043b \u0435\u0433\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0435\u0435, \u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 (\u0447\u0430\u0441\u0442\u044c 2)<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/926720\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u0430\u0445 LESS: \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445, \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0451\u043c\u0430\u0445. \u0410 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0432\u0435\u0449\u0430\u0445, \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435\u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u043e\u043c \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 LESS-\u043a\u043e\u0434\u0430 \u0432 CSS;<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0437 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u043e\u043b\u0435\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 HTML \u0438 CSS.<\/p>\n<\/li>\n<\/ul>\n<p>\u0410 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f LESS-\u043a\u043e\u0434\u0430 \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 LESS \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043d\u0430 Javascript&#8217;\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0432 \u0440\u043e\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0430 \u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432);<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 LESS.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0442!<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/p0\/lt\/vk\/p0ltvk0ymeji60myvztkut_pjs0.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/p0\/lt\/vk\/p0ltvk0ymeji60myvztkut_pjs0.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/p0\/lt\/vk\/p0ltvk0ymeji60myvztkut_pjs0.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u276f \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<blockquote>\n<p><em>\u0412\u0441\u0451 \u043e\u0442 \u0443\u0436\u0430\u0441\u0430 \u0440\u044b\u0434\u0430\u0435\u0442<\/em><br \/> <em>\u0418 \u0434\u0440\u043e\u0436\u0438\u0442 \u043a\u0430\u043a \u0431\u0430\u043d\u043d\u044b\u0439 \u043b\u0438\u0441\u0442!<\/em><br \/> <em>\u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442<\/em><br \/> <em>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 LESS&#8217;\u0438\u0441\u0442.<\/em><\/p>\n<p>\u2014\u00a0\u041f\u043e\u0447\u0442\u0438 \u0410\u0411\u0421<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u0438\u0437\u043b\u043e\u0436\u0443 \u0441\u0432\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432\u00a0\u2014\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0442\u0435\u043c, \u043a\u0442\u043e \u043d\u0430\u0439\u0434\u0451\u0442 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432 \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0435\u0433\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 (\u0438 \u0447\u0442\u043e \u0441 \u043d\u0438\u043c\u0438 \u043f\u043e\u0442\u043e\u043c \u0434\u0435\u043b\u0430\u0442\u044c).<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/4r\/mh\/le\/4rmhle3h0gjzh-hww4d1pvcioa8.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/4r\/mh\/le\/4rmhle3h0gjzh-hww4d1pvcioa8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/4r\/mh\/le\/4rmhle3h0gjzh-hww4d1pvcioa8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u276f main.less (\u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f)<\/h3>\n<p>\u041a\u0430\u043a \u044f \u043e\u0431\u0435\u0449\u0430\u043b, \u0434\u0430\u043b\u0435\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439. \u041f\u043e\u043a\u0430 \u0436\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 (HTML) \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 LESS.<\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 (<code>index.html<\/code>). \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0444\u0430\u0439\u043b \u0441 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c <code>main.less<\/code>. \u0412 \u043d\u0435\u0433\u043e \u0432\u043e\u0439\u0434\u0443\u0442 \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 <code>index.html<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0430 CSS.<\/p>\n<p>\u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0430\u0448\u0443 IDE \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0444\u0430\u0439\u043b <code>main.less<\/code> \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 IDE \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u00a0\u2014\u00a0\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <strong>Visual Studio 2022<\/strong> \u0438 \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Failwyn.WebCompiler64\" rel=\"noopener noreferrer nofollow\">Web Compiler 2022+<\/a>. \u0412\u044b \u0436\u0435, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c <strong>VS Code<\/strong>, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=mrcrowl.easy-less\" rel=\"noopener noreferrer nofollow\">Easy LESS<\/a>. \u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 (<code>main.less<\/code>\u00a0\u2192\u00a0<code><strong>main.css<\/strong><\/code>) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e <em>source map<\/em> \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 (\u0447\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435).<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 <code>main.less<\/code> \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0442\u0440\u0451\u0445 \u0444\u0430\u0439\u043b\u043e\u0432: \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e <code>main.css<\/code>, \u0435\u0433\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 <code>main.min.css<\/code> \u0438 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0433\u043e <code>main.min.css.map<\/code>. \u0424\u0430\u0439\u043b <code>main.css<\/code> \u043d\u0443\u0436\u0435\u043d \u043d\u0430\u043c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. <code>main.min.css<\/code> \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d (\u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0431\u0438\u043b\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebView\/Chromium), \u0441\u0441\u044b\u043b\u0430\u044f\u0441\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0438\u0437 HTML \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c:<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"css\/main.min.css\"&gt; <\/code><\/pre>\n<p>\u041d\u0443 \u0430 <code>main.min.css.map<\/code> \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c <strong>DevTools<\/strong>. \u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u043e\u043c\u0435\u0440\u0430 \u0441\u0442\u0440\u043e\u043a \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 (\u0430 \u043d\u0435 \u0432\u0435\u0447\u043d\u043e\u0435 <code>1<\/code> \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430).<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u043e <code>main.less<\/code> \u044f \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0442\u0440\u0438 \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 LESS.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 CSS.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n<pre><code class=\"css\">\/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 @debug: true;  \/\/ \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 LESS @import \"lib\";  \/\/ \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 CSS @import \"animations.css\"; <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445? \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438:<\/p>\n<pre><code class=\"css\">.debugA when (@debug = true) { background-color: aliceblue; } <\/code><\/pre>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 <code>.debugA<\/code> (\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>.debugA<\/code>, \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background-color<\/code> \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 <code>.debugA()<\/code> \u043a\u0430\u043a \u043c\u0438\u043a\u0441\u0438\u043d\u0430) \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>@import<\/code> (\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0430\u044f <code>#include<\/code> \u0438\u0437 C\/C++) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 LESS-\u0444\u0430\u0439\u043b\u044b, \u0442\u0430\u043a \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 CSS&#8217;\u043d\u044b\u0435. \u041f\u0440\u0438 \u0432\u0441\u0442\u0430\u0432\u043a\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 LESS, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>@import \"lib\";<\/code> \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>lib.less<\/code>). \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d (\u0438\u043d\u0430\u0447\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u0433\u043b\u0443\u043f\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?).<\/p>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0445 CSS-\u0444\u0430\u0439\u043b\u043e\u0432, \u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0435\u0439 \u043a\u043e\u0434 \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 CSS:<\/p>\n<pre><code class=\"css\">@keyframes sys-rotate-from-0-to-360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }  @keyframes sys-opacity-from-0-to-1 { from { opacity: 0; } to { opacity: 1; } }  @keyframes sys-opacity-from-1-to-0 { from { opacity: 1; } to { opacity: 0; } }  \/* \u2026\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. *\/ <\/code><\/pre>\n<p>\u0422\u0430\u043c \u0436\u0435, \u0432 <code>main.less<\/code>, \u044f \u043f\u0438\u0448\u0443 \u0432\u0441\u0435 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b (\u0442\u043e \u0435\u0441\u0442\u044c, \u0442\u0430\u043a\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u044b\u0441\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 <code>main.css<\/code>). \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"css\">\/\/ Mixin for a button with a nested SVG icon. .icon-button(@size) { .size-and-font(@size); .center-center();  background-color: transparent; border: none; }  .code-toolbar { \u2026 &amp; &gt; button { .icon-button(rp(32));  opacity: 0; \u2026 } }  .btn-close-dialog { .icon-button(rp(36)); \u2026 } <\/code><\/pre>\n<h3>\u276f lib.less (\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u0442.\u043f.)<\/h3>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u044b\u0445, \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 LESS-\u0444\u0430\u0439\u043b\u0430\u0445 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c\u0441\u044f \u043e\u0434\u043d\u043e\u0439\u00a0\u2014\u00a0<code>lib.less<\/code>.<\/p>\n<p>\u0412\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u043e <code>lib.less<\/code> \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b:<\/p>\n<pre><code class=\"css\">@plugin \"less-lib.js\"; <\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 LESS, \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0441\u0432\u043e\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 LESS, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u043a\u0430\u043a \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445, \u0442\u0430\u043a \u0438 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u0432\u0435\u0434\u044c \u044d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 <code>main.less<\/code> \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c). \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u00ab\u043c\u0430\u043a\u0440\u043e\u0441\u00bb <code>rp()<\/code> \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0434\u043b\u044f \u043f\u0443\u0449\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u00ab\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445\u00bb \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0432\u043c\u0435\u0441\u0442\u043e rem&#8217;\u043e\u0432? \u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<p>\u0427\u0442\u043e \u0435\u0449\u0451 \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043e \u0432 <code>lib.less<\/code>?<\/p>\n<p>\u0421\u043f\u0438\u0441\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>@range-track<\/code> \u0438 <code>@range-thumb<\/code>.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>@text-input<\/code>.<\/p>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u043e-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>.any<\/code>.<\/p>\n<p>\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">\/\/ Sets width and height. .size(@w, @h) { width: @w; height: @h; }  \/\/ Sets the same width and height. .size(@size) { .size(@size, @size); }  \/\/ Sets the same width, height and 1em. .size-and-font(@size) { .size(@size);  font-size: @size; }  \/\/ Sets left and top. Makes an element absolutely positioned. .pos(@l, @t) { left: @l; top: @t;  position: absolute; }  \/\/ Sets the same left and top. Makes an element absolutely positioned. .pos(@offset) { .pos(@offset, @offset); }  \/\/ Sets right and top. Makes an element absolutely positioned. .r-pos(@r, @t) { right: @r; top: @t;  position: absolute; }  \/\/ Sets the same right and top. &lt;akes an element absolutely positioned. .r-pos(@offset) { .r-pos(@offset, @offset); }  \/\/ Sets right and bottom. Makes an element absolutely positioned. .rb-pos(@r, @b) { right: @r; bottom: @b;  position: absolute; }  \/\/ Sets the same right and bottom. Makes an element absolutely positioned. .rb-pos(@offset) { .rb-pos(@offset, @offset); }  \/\/ Sets left and bottom. Makes an element absolutely positioned. .lb-pos(@l, @b) { left: @l; bottom: @b;  position: absolute; }  \/\/ Sets the same left and bottom. Makes an element absolutely positioned. .lb-pos(@offset) { .lb-pos(@offset, @offset); }  \/\/ Sets all four: left, top, right and bottom. Makes an element absolutely positioned. .l-t-r-b(@l, @t, @r, @b) { left: @l; top: @t; right: @r; bottom: @b;  position: absolute; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">\/\/ Makes an element round. .circle() { border-radius: 100%; }  \/\/ Flips an element vertically. .flip-vertically() { transform: scaleY(-1); }  \/\/ Clears out any default style of a control. .reset-control() { appearance: none; background-color: transparent; }  \/\/ Makes a control vertical. .vertical-control() { writing-mode: vertical-lr; direction: rtl; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h3>\u276f less-lib.js (\u043f\u043b\u0430\u0433\u0438\u043d\u044b LESS, \u0442.\u0435. \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438)<\/h3>\n<p>\u041a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 Javascript. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e, \u0444\u0430\u0439\u043b \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 CSS, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u0435\u0440\u0436\u0443 \u0435\u0433\u043e \u0432 \u0442\u043e\u0439 \u0436\u0435 \u043f\u0430\u043f\u043a\u0435, \u0433\u0434\u0435 \u0438 \u0432\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 LESS\/CSS.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b LESS<\/h2>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443, \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u043c\u0435\u0436\u0434\u0443 LESS \u0438 SASS, \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e LESS? \u041f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Javascript, \u0441 \u043f\u0440\u0438\u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u044e\u0437\u0435\u0440\u0441\u043a\u0438\u0435 JS-\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u042f \u0437\u043d\u0430\u043b, \u0447\u0442\u043e \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e (\u043f\u0440\u0438\u0447\u0451\u043c, \u0441\u043a\u043e\u0440\u0435\u0435, \u0440\u0430\u043d\u043e) \u043c\u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f <s>\u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0438 \u043d\u0430 \u044d\u0442\u0443 \u0434\u0440\u044f\u043d\u044c<\/s> \u043d\u0430\u0447\u0430\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432 \u044f\u0437\u044b\u043a\u0435 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/zu\/lq\/rd\/zulqrdjfl0h44erijuv4uylb1nw.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/zu\/lq\/rd\/zulqrdjfl0h44erijuv4uylb1nw.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/zu\/lq\/rd\/zulqrdjfl0h44erijuv4uylb1nw.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0422\u0430\u043a \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c \u00ab\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438\u00bb \u043d\u0430 \u0437\u0430\u043c\u0435\u043d\u0443 rem&#8217;\u0430\u043c, \u043d\u043e \u0438\u043c\u0438 \u0434\u0435\u043b\u043e \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 <code>less-lib.js<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ 1. \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0433\u0443\u0438\u0434\u043e\u0432:  \/\/ 'crypto' interface is not available in some LESS-compiling environments. function getGuid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(\/[xy]\/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r &amp; 0x3 | 0x8); return v.toString(16); }); }  \u2026  registerPlugin ( { install: function (less, pluginManager, functions) {  \/\/ 2. \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u0437 LESS:  functions.add('myFunction1', function (parameters) { return \u2026; });  functions.add('myFunction2', function (parameters) { return \u2026; });  \u2026 } } ) <\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c (<code>myFunction1()<\/code>, <code>myFunction2()<\/code> \u0438 \u0442.\u0434.), \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u0438\u0437 LESS \u043d\u0430\u0440\u0430\u0432\u043d\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (\u0442\u0430\u043a\u0438\u043c\u0438, \u043a\u0430\u043a <code>e()<\/code>, <code>each()<\/code> \u0438 <code>range()<\/code>, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438).<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438. \u0412\u043e <strong>\u0432\u0441\u0435\u0445<\/strong> \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435 <code>value<\/code>, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041a\u0441\u0442\u0430\u0442\u0438, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043d\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0432\u0430\u0441 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f), \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0443\u0442\u0438: \u043f\u0443\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0433\u043e \u0441\u0430\u043c\u0443\u0440\u0430\u044f\u00a0\u2014\u00a0\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0438 \u043f\u0443\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u044f\u00a0\u2014\u00a0\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u044d\u0442\u043e \u00ab\u0430\u043b\u0435\u0440\u0442-\u043e\u0442\u043b\u0430\u0434\u043a\u0430\u00bb \ud83d\ude0e\u00a0\u2014\u00a0\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043f\u043e\u043b\u0435\u0439 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0435\u0451 \u043a\u0430\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432 IDE \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f (\u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e).<\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0434\u0436\u0430\u0432\u0430\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 (<code>'red'<\/code>), \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 LESS (<code>new tree.Value(myArray);<\/code>) \u0438 \u0447\u0438\u0441\u043b\u043e \u0441 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f (<code>new tree.Dimension(42, 'px')<\/code>).<\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0440\u0430\u043d\u0435\u0435 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0432\u0448\u0430\u044f\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>rp()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c <code>width: rp(3);<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0433\u043b\u0430\u0437\u043e\u043b\u043e\u043c\u0430\u044e\u0449\u0435\u0433\u043e <code>width: 0.1875rem;<\/code>:<\/p>\n<pre><code class=\"javascript\">functions.add('rp', function (rpx) { return new tree.Dimension(rpx.value \/ 16, 'rem'); }); <\/code><\/pre>\n<h3>\u276f \u041f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u0434\u0442\u043e\u043b\u043a\u043d\u0438<\/h3>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u043e \u0447\u0451\u043c \u0434\u0443\u043c\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u043e\u043c \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u043f\u0438\u0448\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u044d\u0442\u043e \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0432 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u043c \u0447\u0438\u0441\u043b\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.<\/p>\n<p>\u041f\u0440\u0438\u0437\u043d\u0430\u044e\u0441\u044c: \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u044e\u0431\u043b\u044e \u043d\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u043a\u0430\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u043d\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u0430\u043a \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0438. \u041b\u044e\u0431\u0430\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f\u00a0\u2014\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0433 \u043d\u0430 \u043f\u0443\u0442\u0438 \u043e\u0442 \u0437\u0430\u043c\u044b\u0441\u043b\u0430 \u043a \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443, \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0435 \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0433\u043e \u044f\u0437\u044b\u043a\u0430), \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0435\u0451. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0437\u043e\u043a \u043f\u043e\u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u00ab\u0432 \u043f\u043e\u043b\u044f\u0445\u00bb, \u0442.\u0435. \u043d\u0430 \u043f\u043b\u043e\u0449\u0430\u0434\u043a\u0435 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430, \u0433\u0434\u0435 \u0438\u0437 \u0432\u0441\u0435\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0411\u043b\u043e\u043a\u043d\u043e\u0442, \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0448\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0443\u0447\u0448\u0435, \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0442\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0433\u0438\u0431\u0447\u0435.<\/p>\n<p>\u041d\u043e \u0440\u0430\u0437 \u0443\u0436 \u0432\u044b \u0442\u0443\u0442 \u0438 \u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u044d\u0442\u043e\u0442 \u043e\u043f\u0443\u0441, \u0437\u043d\u0430\u0447\u0438\u0442 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u0432\u0430\u0441 \u0443\u0431\u0435\u0434\u0438\u043b, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 CSS \u0438\u0433\u0440\u0430 \u0441\u0442\u043e\u0438\u0442 \u0441\u0432\u0435\u0447, \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f LESS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u0443\u0447\u0448\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u0447\u0435\u043c \u0433\u043e\u043b\u044b\u0439 CSS. \u0410 \u043e\u0448\u0438\u0431\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 LESS \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0442\u0435\u0441\u0442\u043e\u0432. (\u041d\u0430 C++ \u0438\u043b\u0438 C# \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c, \u0430 \u0432 LESS\u00a0\u2014\u00a0\u043c\u043e\u0436\u0435\u0442\u0435).<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u044b\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438?<\/p>\n<p>\u0412\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e\u00a0\u2014\u00a0\u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043a\u0438\u043d\u0443\u0442\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c: <code>throw new Error('\u041d\u0443, \u043f\u0440\u0438\u0432\u0435\u0442');<\/code>. \u041e\u0448\u0438\u0431\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u043b\u044e\u0431\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u0441 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c LESS-\u043a\u043e\u0434\u043e\u043c, \u0447\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u043c \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 <code>'\u041d\u0443, \u043f\u0440\u0438\u0432\u0435\u0442'<\/code> \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0438\u043c\u0435\u043d\u0435\u043c LESS-\u0444\u0430\u0439\u043b\u0430 \u0432 \u043e\u043a\u043d\u043e IDE \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438.<\/p>\n<p>(\u0421\u044e\u0434\u0430 \u0436\u0435, \u043a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0438\u043f\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435\u00a0\u2014\u00a0\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u043b\u0435\u043d\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 LESS.js).<\/p>\n<p>\u0418 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u044b\u0445 \u044e\u0437-\u043a\u0435\u0439\u0441\u043e\u0432, \u043d\u0443\u0436\u043d\u044b\u0445 \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445\u00a0\u2014\u00a0\u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u0434\u043b\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0438 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430.<\/p>\n<h3>\u276f \u201cDie, Bart, die\u201d (\u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u043c)<\/h3>\n<p>\u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>die()<\/code>:<\/p>\n<pre><code class=\"javascript\">functions.add('die', function (message) { throw new Error(`Compiling LESS error: ${message.value}`); }); <\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u043c\u0430\u043a\u0440\u043e\u0441 <code>TODO<\/code>, \u043a\u043e\u0433\u0434\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0448\u044c \u0446\u0435\u043b\u043e\u0435 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0438 \u043d\u0435 \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0448\u044c \u0438\u0445 \u0432\u0441\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u043c \u0431\u0438\u043b\u0434\u0435:<\/p>\n<pre><code class=\"css\">.frame-based-animation(@src, @speed) { die('Not implemented'); } <\/code><\/pre>\n<p>\u0418\u043b\u0438 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.set-aspect-ratio-and-background-from-img(@src, @inverse: false) { &amp; when (@debug = false) { die('Not implemented'); }  \u2026 \u0447\u0435\u0440\u043d\u043e\u0432\u0430\u044f \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u2026 } <\/code><\/pre>\n<p>\u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u00a0\u2014\u00a0\u0440\u0435\u043b\u0438\u0437\u043d\u043e\u0439) \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u043d\u0435\u0434\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u043d\u0435\u0434\u043e\u043e\u0442\u043b\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u0430. (\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>when (@debug = true)<\/code> \u0432 \u043a\u043e\u043d\u0446\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u0430, \u043a\u0430\u043a \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>.debugA<\/code>, \u0441\u0431\u043e\u0440\u043a\u0430 \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f\u00a0\u2014\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043b\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e).<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u0418 \u0432\u0443\u0430\u043b\u044f: \u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u0447\u0442\u0438-enum \u0434\u043b\u044f \u044f\u0437\u044b\u043a\u0430 LESS. \u0412\u043e\u0442 \u043e\u043d\u0430, \u043e\u0431\u0435\u0449\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f!<\/p>\n<pre><code class=\"css\">.my-mixin(@param) { &amp; when not (@param = 'none') and not (@param = 'fill') and not (@param = 'ignore') { die('Invalid @param value'); }  a: b; }  .test { \/\/ \u0421\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 .test { a : b; } .my-mixin('none');  \/\/ \u0412\u044b\u0434\u0430\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 (\u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0444\u0430\u0439\u043b\u0430, \u0441\u0442\u0440\u043e\u043a\u0438): \/\/ SyntaxError: Error evaluating function `die`: \/\/ Compiling LESS error: Invalid @param value in \\css\\main.less .my-mixin(0); } <\/code><\/pre>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u044f \u0443\u0432\u0438\u0436\u0443, \u0447\u0442\u043e \u0442\u0435\u043c\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u044f \u0440\u0430\u0437\u0431\u0435\u0440\u0443, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u044f\u0437\u044b\u043a\u0430 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 <code>enum<\/code>.<\/p>\n<p>\u0415\u0449\u0451 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>die()<\/code> \u043c\u043e\u0436\u043d\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0435 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0430\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0430) \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438.<\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0438\u0437\u043b\u0438\u0448\u043d\u044f\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043a\u0430, \u0438 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u0433\u043b\u044e\u043a\u0430\u043b\u0443 \u043f\u043e\u043b\u0438\u0440\u0443\u044e\u00bb. \u0412\u043e \u0432\u0441\u044f\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u043d\u0435 \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043a\u0430\u0436\u0435\u0442\u0441\u044f. \u041d\u043e \u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e \u0441\u0435\u0431\u0435: \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e (\u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0445\u0443\u043c\u0430\u043d\u0430) \u0441\u043b\u043e\u043c\u0430\u043d\u0430. \u0418 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 + <code>die()<\/code>\u00a0\u2014\u00a0\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0412\u0435\u0434\u044c \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0441\u0447\u0451\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438\u0434\u0451\u0442 \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0438\u043b\u0438 \u0441\u043e\u0442\u043d\u0438 \u0442\u044b\u0441\u044f\u0447 (\u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0435\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435), \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0431\u043b\u0430\u0436\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>(\u0410 \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0442\u043e \u0442\u0430\u043a \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043b\u0430\u0436\u0430\u0435\u0442? \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 Firefox! \u042f, \u043f\u0440\u0430\u0432\u0434\u0430, \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c Nightly-\u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0438\u0437-\u0437\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0432 \u043d\u0435\u0439 <code>about:config<\/code>, \u043d\u043e \u0437\u0430 \u0442\u043e, \u043a\u0430\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043a\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 CSS, \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0442\u044b\u0434\u043d\u043e \u0434\u0430\u0436\u0435 \u0432 Nightly-\u0432\u0435\u0440\u0441\u0438\u0438).<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/5r\/pb\/cs\/5rpbcs-ykuodw8g5jebclpely4s.png\" alt=\"\u041e\u0434\u0438\u043d \u043d\u0435\u043b\u043e\u0432\u043a\u0438\u0439 \u043f\u043e\u0432\u043e\u0440\u043e\u0442, \u0438\u2026 \u044d-\u044d-\u044d\u2026 \u043c\u0435\u043d\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0440\u0432\u0451\u0442.\" title=\"\u041e\u0434\u0438\u043d \u043d\u0435\u043b\u043e\u0432\u043a\u0438\u0439 \u043f\u043e\u0432\u043e\u0440\u043e\u0442, \u0438\u2026 \u044d-\u044d-\u044d\u2026 \u043c\u0435\u043d\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0440\u0432\u0451\u0442.\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/5r\/pb\/cs\/5rpbcs-ykuodw8g5jebclpely4s.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/5r\/pb\/cs\/5rpbcs-ykuodw8g5jebclpely4s.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0434\u0438\u043d \u043d\u0435\u043b\u043e\u0432\u043a\u0438\u0439 \u043f\u043e\u0432\u043e\u0440\u043e\u0442, \u0438\u2026 \u044d-\u044d-\u044d\u2026 \u043c\u0435\u043d\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0440\u0432\u0451\u0442.<\/figcaption><\/div>\n<\/figure>\n<h3>\u276f \u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u043e\u0434\u0438\u043d \u043c\u043e\u0439 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439\u2026 \u043f\u043e\u043a\u043e\u0439\u043d\u0438\u043a\u2026 \u0434\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0438\u043a\u043e\u043c\u0443, \u0434\u0430\u0436\u0435 \u0441\u0435\u0431\u0435<\/h3>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u044e\u0437-\u043a\u0435\u0439\u0441 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438\u00a0\u2014\u00a0\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. (\u041f\u043e \u043f\u0440\u0430\u0432\u0434\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e). \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u0437\u0432\u0430\u0442\u044c assert&#8217;\u0430\u043c\u0438 (\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u044d\u0442\u043e <em>\u0442\u0435\u0441\u0442<\/em>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 <em>\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/em>, \u0442\u0435\u0440\u043c\u0438\u043d, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0441\u0430\u043c\u044b\u0439 \u0443\u0434\u0430\u0447\u043d\u044b\u0439\u00a0\u2014\u00a0\u043d\u043e \u043a\u0430\u043a \u043d\u0430\u0437\u0432\u0430\u043b, \u0442\u0430\u043a \u043d\u0430\u0437\u0432\u0430\u043b). \u0418\u0442\u0430\u043a, \u0432\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f assert&#8217;\u0430 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"javascript\">functions.add('assertEq', function (a, b) { \/\/ \u0412\u041d\u0418\u041c\u0410\u041d\u0418\u0415! \u0414\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c. if (a.value != b.value) throw new Error(`Assertion failed: ${a.value} != ${b.value}`);  return ''; }); <\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0435\u044e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 LESS, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c:<\/p>\n<pre><code class=\"css\">.my-mixin() { \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0440\u0430\u0441\u0447\u0451\u0442\u043e\u0432. @var-1: .get-var-1()[]; @var-2: .get-var-2()[];  \/\/ \u041e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0440\u0430\u0432\u043d\u044b. assertEq(@var-1, @var-2); \/\/ \u041d\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.  \u2026 } <\/code><\/pre>\n<h3>\u276f \u0421\u043a\u0430\u0436\u0438\u0442\u0435, \u041c\u0430\u043b\u0435\u0432\u0438\u0447, \u043a\u0430\u043a \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0443: \u0430 \u0432 \u043f\u0440\u0438\u0441\u043b\u0430\u043d\u043d\u043e\u043c \u0432\u0430\u043c\u0438 \u0444\u0430\u0439\u043b\u0435 \u0434\u043b\u0438\u043d\u0430 \u0442\u043e\u0447\u043d\u043e \u0440\u0430\u0432\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0435?<\/h3>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/no\/lw\/iy\/nolwiyw0eyl66letgn3yjhcxlmy.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/no\/lw\/iy\/nolwiyw0eyl66letgn3yjhcxlmy.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/no\/lw\/iy\/nolwiyw0eyl66letgn3yjhcxlmy.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041e\u0445 \u0443\u0436 \u044d\u0442\u0438 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0438. \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u0441 \u043d\u0435\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u043e\u043d\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0441 \u0431\u043e\u043a\u043e\u0432 (\u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438\u043b\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438), \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043d\u044b\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439 \u0444\u0430\u0439\u043b (\u0433\u043e\u0432\u043e\u0440\u044f \u0444\u043e\u0442\u043e\u0448\u043e\u043f\u043e\u0432\u0441\u043a\u043e\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439 canvas).<\/p>\n<p>\u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438! \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0445\u043e\u0442\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 LESS \u043d\u0435 \u0434\u0430\u0441\u0442 \u0432\u0430\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 (\u0447\u0442\u043e, \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0433\u043e\u0440\u0447\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0443\u043c\u0435\u0440\u043e\u0432, \u043e\u0442\u0432\u044b\u043a\u0448\u0438\u0445 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438), \u0437\u0430\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u0435-\u043a\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 \u0432\u0432\u043e\u0434-\u0432\u044b\u0432\u043e\u0434? \u0422\u0430\u043a \u0432\u043e\u0442, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043b\u0438\u043d\u0443 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443 \u0444\u0430\u0439\u043b\u0430 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0418 \u0441\u0440\u0430\u0437\u0443 \u0438\u0445 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c:<\/p>\n<pre><code class=\"css\">\/\/ Checks, whether an image is square. Breaks compilation, if not. \/\/ Out params: cached @width, @height. .assert-image-is-square(@src) { @width: image-width(@src); @height: image-height(@src);  assertEq(@width, @height); } <\/code><\/pre>\n<p>\u042d\u0442\u043e assert-\u043c\u0438\u043a\u0441\u0438\u043d \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 <code>lib.less<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>assertEq<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u0440\u0430\u0432\u043d\u044b.<\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.assert-image-is-square('..\/images\/black-square.png'); <\/code><\/pre>\n<p>\u0418\u043b\u0438 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">@src: '..\/images\/lens.png'; @size: unit(.assert-image-is-square(@src)[@width]); <\/code><\/pre>\n<p>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0448\u0435\u043c\u0443 \u0433\u0443\u043c\u0430\u043d\u0438\u0442\u0430\u0440\u043d\u043e\u043c\u0443 \u0434\u0440\u0443\u0433\u0443, \u0432\u043e\u043e\u0440\u0443\u0436\u0451\u043d\u043d\u043e\u043c\u0443 \u0424\u043e\u0442\u043e\u0448\u043e\u043f\u043e\u043c, \u0434\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044e. \u041f\u0443\u0441\u0442\u044c \u0441\u0430\u043c \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442 \u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u043b\u0438\u043d\u0437\u043e\u0439, \u0430 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u0448\u0430\u0442\u044c \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443. \u0415\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u0432\u0434\u0440\u0443\u0433 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u043c, \u0431\u0438\u043b\u0434-\u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u043e\u0431\u0435\u0440\u0451\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438 \u043f\u0440\u0438 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 continious integration \u0432\u0441\u0435 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043b\u0438\u0446\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u043f\u043e <s>\u0433\u043e\u043b\u043e\u0432\u0435<\/s> \u043f\u0438\u0441\u044c\u043c\u0443. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044f \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u044f \u0442\u0430\u043a \u0436\u0451\u0441\u0442\u043a\u043e \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043d\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u00a0\u2014\u00a0\u043f\u0443\u0441\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 (\u043a \u0447\u0435\u043c\u0443 \u043c\u044b \u0435\u0449\u0451 \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f).<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445\u2026 \u044f \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b, \u0447\u0442\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0432 \u0440\u043e\u043b\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043d\u043e \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u0432\u043e\u0442, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u043e\u0439 <code>return<\/code>\u00a0\u2014\u00a0\u0432\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0435, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u0442\u043e\u0442 \u043c\u0438\u043a\u0441\u0438\u043d \u043d\u0435\u044f\u0432\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442. \u0412 \u043d\u0430\u0448\u0435\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u0435 \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438 \u0434\u0432\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445: <code>@width<\/code> \u0438 <code>@height<\/code>. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c\u00a0\u2014\u00a0\u0443\u043a\u0430\u0437\u0430\u0432 \u0438\u043c\u044f \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u043d\u0430\u0448 \u043c\u0438\u043a\u0441\u0438\u043d \u043d\u0435 \u0443\u043f\u0430\u043b \u0438\u0437-\u0437\u0430 \u043d\u0435\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0442\u0430\u043a\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c: <code>.assert-image-is-square(@src)[@width]<\/code> \u0432\u0435\u0440\u043d\u0451\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>@width<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e-\u0442\u043e \u0435\u0449\u0451, \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u0437\u0430\u0447\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0434\u0432\u0430\u0436\u0434\u044b? \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 LESS \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0447\u0442\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430, \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u00a0\u2014\u00a0\u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u043d\u0435\u0441\u0438\u043b\u044c\u043d\u043e, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0430 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0432 \u0438\u0434\u0435\u0430\u043b\u0435\u00a0\u2014\u00a0\u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e. (\u0418 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u043f\u043e\u0434\u043e\u043b\u0433\u0443, \u043f\u043e\u043a\u0430 \u043a\u043e\u0434 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043e\u0442\u043d\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0434\u0438\u043d \u0441\u0438\u043c\u0432\u043e\u043b, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043a \u043d\u0438\u043c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f).<\/p>\n<p>\u041d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>image-width()<\/code> \u0438 <code>image-height()<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043d\u0435 \u0447\u0438\u0441\u043b\u0430, \u0430 \u0434\u043b\u0438\u043d\u044b, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\u00a0\u2014\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 <code>px<\/code> (\u044d\u0442\u043e \u0436\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f!), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a \u0441\u043c\u0435\u043b\u043e \u043e\u0442\u0434\u0430\u0451\u043c \u0438\u0445 \u0432 <code>assertEq()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 (\u043f\u043e\u043b\u0435 <code>value<\/code>). \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0447\u0438\u0441\u043b\u043e\u043c, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0418\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0451 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>.assert-image-is-square(@src)[@width]<\/code> (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0440\u043d\u0443\u043b \u043c\u0438\u043a\u0441\u0438\u043d) \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e LESS: <code>unit()<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u043e\u0434\u043d\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0432 \u0434\u0440\u0443\u0433\u0438\u0435, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\u00a0\u2014\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0447\u0438\u0441\u043b\u043e. \u042d\u0442\u043e \u0447\u0438\u0441\u043b\u043e, \u0440\u0430\u0432\u043d\u043e\u0435 \u0438 \u0434\u043b\u0438\u043d\u0435, \u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043b\u0438\u043d\u0437\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>@size<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0441\u0447\u0451\u0442\u0430\u0445:<\/p>\n<pre><code class=\"css\">@margin: (@size * 0.3); \/\/ \u041e\u0442\u0441\u0442\u0443\u043f\u044b 30% \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430. margin: unit(@margin, px); <\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0435\u0440\u0441\u0438\u044e assert&#8217;\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0438:<\/p>\n<pre><code class=\"css\">\/\/ Checks, whether all images are square. Breaks compilation, if not. \/\/ No out params. .assert-images-are-square(@images) { each(@images, { .assert-image-is-square(@value); }); } <\/code><\/pre>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0442\u0430\u043b\u0438\u0441\u044c: \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043c\u0438\u043a\u0441\u0438\u043d \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 <code>lib.less<\/code>. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a (\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 <code>main.less<\/code>):<\/p>\n<pre><code class=\"css\">@cell-images: '..\/images\/1.png', '..\/images\/2.png', '..\/images\/3.png', '..\/images\/4.png', '..\/images\/5.png', '..\/images\/6.png', '..\/images\/7.png', '..\/images\/8.png', '..\/images\/9.png';  .assert-images-are-square(@cell-images); <\/code><\/pre>\n<h3>\u276f \u0412\u0441\u0435 \u043b\u0438 \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u0435 \u0440\u0430\u0432\u043d\u044b, \u0438\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0432\u043d\u0435\u0435?<\/h3>\n<p>\u0412\u043e\u0442 \u0447\u0442\u043e \u0435\u0449\u0451 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435. (\u0418\u043d\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b, \u0434\u0435\u043b\u0430\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u044b\u00a0\u2014\u00a0\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0434\u0440\u043e\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u043e \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u0438 \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u0435\u0431-\u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430\u043c\u0438 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0434\u0430\u0451\u0442 \u0431\u0443\u0441\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043a\u0430\u043a \u0440\u0430\u043d\u044c\u0448\u0435).<\/p>\n<p>\u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432\u0441\u0435\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0422\u0435\u043f\u0435\u0440\u044c, \u044f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0439\u043c\u0451\u0442\u0435 \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <code>lib.less<\/code>:<\/p>\n<pre><code class=\"css\">\/\/ Checks, whether two images are the same size. Breaks compilation, if not. \/\/ Out params: cached @width, @height. .assert-images-are-the-same-size(@image-1, @image-2) { @width: image-width(@image-1); @height: image-height(@image-1);  assertEq(@width, image-width(@image-2)); assertEq(@height, image-height(@image-2)); }  \/\/ Checks, whether all images are the same size. Breaks compilation, if not. \/\/ Out params: cached @width, @height. .assert-images-are-the-same-size(@images) { @first-image: extract(@images, 1); @width: image-width(@first-image); @height: image-height(@first-image);  each(@images, { assertEq(image-width(@value), @width); assertEq(image-height(@value), @height); }); }  <\/code><\/pre>\n<p>\u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: <code>@image-1<\/code> \u044d\u0442\u043e \u043d\u0435 \u00ab\u0438\u043c\u0438\u0434\u0436 \u043c\u0438\u043d\u0443\u0441 \u043e\u0434\u0438\u043d\u00bb, \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u043b\u0435\u043f\u0443, \u0430 \u0438\u043c\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u00ab\u043f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u00bb. \u042d\u0445, \u043b\u044e\u0431\u043b\u044e LESS \u0438 CSS: \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u00ab\u043c\u0438\u043d\u0443\u0441\u00bb, \u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u043f\u0440\u043e\u0431\u0435\u043b\u044b, \u043d\u0435 \u043b\u0435\u043f\u0438\u0442\u0435 \u0432\u0441\u0451 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u043b\u0438\u0442\u043d\u0443\u044e \u043a\u0443\u0447\u043a\u0443!<\/p>\n<p>\u0418\u0437 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e: \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0435 \u043d\u0430\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>extract<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 (\u0430\u043d\u0430\u043b\u043e\u0433 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a \u0432 Javascript). \u0418, \u043a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0432\u0435\u0434\u0451\u0442\u0441\u044f \u043e\u0442 \u0435\u0434\u0438\u043d\u0438\u0446\u044b. \u042d\u0445, \u0430 \u0432\u043e\u0442 \u0437\u0430 \u044d\u0442\u043e \u043d\u0435 \u043b\u044e\u0431\u043b\u044e LESS \u0438 CSS.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0430\u0436\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0441\u0442\u044c \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0434\u0430 \u0435\u0449\u0451 \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e:<\/p>\n<pre><code class=\"css\">@cell-images: '..\/images\/1.png', '..\/images\/2.png', '..\/images\/3.png', '..\/images\/4.png', '..\/images\/5.png', '..\/images\/6.png', '..\/images\/7.png', '..\/images\/8.png', '..\/images\/9.png';  @cell-size: .assert-images-are-the-same-size(@cell-images)[@width];             .assert-images-are-square(@cell-images); <\/code><\/pre>\n<p>\u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u043d\u0430\u043f\u0440\u044f\u0433\u0448\u0438\u0441\u044c, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043a\u0440\u043e\u0441\u0441-\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a (\u0434\u0430 \u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445) \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b\u0441\u044f \u0441\u0442\u0440\u043e\u0433\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u044f \u043c\u0430\u043b\u043e\u0434\u0443\u0448\u043d\u043e \u043a\u0443\u043f\u0438\u043b \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 SSD.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ch\/vv\/u8\/chvvu8hdvfsjygon9j9y0dowl3y.png\" alt=\"\u0414\u044d\u043c\u044c\u0435\u043d \u0438\u0437 Mean Girls \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u0443\u0435\u0442\" title=\"\u0414\u044d\u043c\u044c\u0435\u043d \u0438\u0437 Mean Girls \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u0443\u0435\u0442\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/ch\/vv\/u8\/chvvu8hdvfsjygon9j9y0dowl3y.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/ch\/vv\/u8\/chvvu8hdvfsjygon9j9y0dowl3y.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0414\u044d\u043c\u044c\u0435\u043d \u0438\u0437 Mean Girls \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u0443\u0435\u0442<\/figcaption><\/div>\n<\/figure>\n<h2>\u041a\u0430\u043a\u0443\u044e \u0435\u0449\u0451 \u043f\u043e\u043b\u044c\u0437\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a?<\/h2>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 LESS (<code>image-width()<\/code> \u0438 <code>image-height()<\/code>) \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043e\u0442 HTML\/CSS \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0443\u0434\u043e\u0431\u0441\u0442\u0432 \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u041e \u043d\u0438\u0445 \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0438\u0436\u0435.<\/p>\n<h3>\u276f \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432<\/h3>\n<p>\u0414\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u043b\u0438\u0441\u044c \u043a\u043e\u043c\u043f\u0430\u0441 (\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043f\u0443\u0442\u043d\u0438\u043a\u043e\u0432\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438), \u0443\u0440\u043e\u0432\u0435\u043d\u044c (\u00ab\u043f\u0443\u0437\u044b\u0440\u0451\u043a\u00bb, G-sensor, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u0435 \u043e\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438) \u0438 \u0435\u0449\u0451 \u043a\u043e\u0435-\u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044f\u0448\u043a\u0438. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0432 \u0438\u0442\u043e\u0433\u0435:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8v\/do\/sz\/8vdoszqrciyrzqc7wpra24ddl58.gif\" alt=\"\u0418\u0437\u0432\u0438\u043d\u0438\u0442\u0435 \u0437\u0430 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438\" title=\"\u0418\u0437\u0432\u0438\u043d\u0438\u0442\u0435 \u0437\u0430 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/webt\/8v\/do\/sz\/8vdoszqrciyrzqc7wpra24ddl58.gif 780w,&#10;       https:\/\/habrastorage.org\/webt\/8v\/do\/sz\/8vdoszqrciyrzqc7wpra24ddl58.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0418\u0437\u0432\u0438\u043d\u0438\u0442\u0435 \u0437\u0430 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0438\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0441\u043e\u0431\u043e\u0439 Z-\u0441\u0442\u0435\u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043b\u043e\u0451\u0432-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. (\u0414\u0430, \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0438 \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0430\u0440\u043e\u0447\u043a\u043e\u0439 \u0430\u0441\u0441\u0435\u0440\u0442\u043e\u0432, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435).<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/fa\/on\/au\/faonauhuqfegogsfyyj4cysowzc.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/fa\/on\/au\/faonauhuqfegogsfyyj4cysowzc.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/fa\/on\/au\/faonauhuqfegogsfyyj4cysowzc.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0417\u0430\u0447\u0435\u043c \u0442\u0443\u0442 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0451\u0432? \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0435\u0436\u0438\u043c\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u0441\u043b\u043e\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c (\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u043a\u0443 \u043f\u043e\u0432\u0435\u0440\u0445 \u043f\u0443\u0437\u044b\u0440\u044c\u043a\u0430 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442). \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u00ab\u0443\u0440\u043e\u0432\u043d\u044f \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\u00bb\u00a0\u2014\u00a0\u043e\u0434\u043d\u043e \u0434\u0435\u043b\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u0435\u0439\u043b\u0437\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0432 \u043f\u0440\u043e\u0445\u043b\u0430\u0434\u043d\u043e\u043c \u043f\u043e\u043b\u0443\u0442\u0451\u043c\u043d\u043e\u043c \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439-\u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0435\u00a0\u2014\u00a0\u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0447\u0438\u043d\u0451\u043d\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c \u044d\u0442\u0438\u043c \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u0434 \u043f\u0430\u043b\u044f\u0449\u0438\u043c \u0441\u043e\u043b\u043d\u0446\u0435\u043c (\u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u043b\u0438\u043a\u0438\u00a0\u2014\u00a0\u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u0440\u043e\u0434\u043d\u044b\u0445). \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a LESS \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043b\u043e\u044f\u043c\u0438.<\/p>\n<p>\u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0434\u0430\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u043b\u0438\u0441\u044c \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0441\u043b\u043e\u044f\u043c\u0438: \u0441\u043b\u043e\u0439 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u043e\u0439 \u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f, \u0441\u043b\u043e\u0439 \u0441 \u043f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u043b\u0441\u044f \u0438 \u0442.\u0434. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u0435\u043b\u0430\u044f \u044d\u0442\u043e \u043f\u043b\u0430\u0432\u043d\u043e \u0437\u0430 \u0441\u0447\u0451\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>transition<\/code>.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/lf\/ut\/4u\/lfut4ub6b6cwoin3nqjnktsefty.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/lf\/ut\/4u\/lfut4ub6b6cwoin3nqjnktsefty.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/lf\/ut\/4u\/lfut4ub6b6cwoin3nqjnktsefty.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u041f\u0440\u0438\u0447\u0451\u043c, \u0431\u044b\u043b\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438 \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b. \u00ab\u0420\u0430\u0437\u043d\u043e\u0441\u0442\u044c\u00bb \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u043b\u0430\u0441\u044c \u043a\u0430\u043a \u0432 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438, \u0442\u0430\u043a \u0438 \u0432 \u0446\u0432\u0435\u0442\u043e\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435. \u0415\u0441\u043b\u0438 \u043d\u0435 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043d\u0430 \u0436\u0435\u043b\u0435\u0437\u0435, \u043d\u0430\u0432\u0435\u0440\u043d\u043e, \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439, \u0438 \u0437\u0430\u0442\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u0438\u0445 \u043f\u0430\u043a\u0435\u0442\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u043d\u043e \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043a\u0435\u0439\u0441\u00a0\u2014\u00a0\u043f\u043e\u0434\u0433\u043e\u043d\u043a\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u0434 \u0442\u0435\u0445, \u043a\u043e\u043c\u0443 \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442 \u0438\u0437-\u0437\u0430 \u0434\u0435\u0444\u0435\u043a\u0442\u043e\u0432 \u0437\u0440\u0435\u043d\u0438\u044f. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0433\u043e\u043d\u043a\u0438 \u043f\u043e\u0434 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043e\u043d\u0430, \u0441\u0443\u0434\u044f \u043f\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0443, \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u0435\u0449\u0451 \u0434\u043e\u043b\u0433\u043e.<\/p>\n<p>\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443 \u043c\u0435\u043d\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u0432\u0430\u0439\u0441 \u0432\u0435\u0440\u0441\u0438\u0438 CSS \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438.<\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0442\u0430\u043a \u0432 \u043c\u043e\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u043e\u043d\u0430, \u0438\u0437\u0432\u043b\u0435\u0447\u0451\u043d\u043d\u044b\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">\/\/ Makes an element the same size in px as the given image. \/\/ Out params: cached @width, @height. .fixed-element-size-of-img(@src, @set-height: true) { @width: image-width(@src); @height: image-height(@src);  width: @width;  &amp; when (@set-height) { height: @height; } }  \/\/ Adds a background image and sets background size in px. .fixed-background-size-of-img(@src) { @width: image-width(@src); @height: image-height(@src);  background-size: @width @height; background-image: url(@src); }  \/\/ Makes an element the same size in px as the given image. \/\/ Adds the image as background and sets background size in px. .fixed-background-and-element-size-of-img(@src) { .fixed-element-size-of-img(@src); .fixed-background-size-of-img(@src); } <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440, \u0438 \u0444\u043e\u043d \u0441\u043b\u043e\u0451\u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 (\u0430 \u0441\u0442\u0430\u043b\u043e \u0431\u044b\u0442\u044c, \u0438 \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c) \u0441\u0442\u0430\u043b\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c-\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u0430 <code>.fixed-background-and-element-size-of-img()<\/code> \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0444\u0430\u0439\u043b\u0430. \u0418 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0439 CSS.<\/p>\n<blockquote>\n<p><strong>\u2139\ufe0f <\/strong><code><strong>img<\/strong><\/code><strong> vs. <\/strong><code><strong>background-image<\/strong><\/code><br \/> \u041c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441: \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0432 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>&lt;img&gt;<\/code>, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b\u043e\u043c? \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 CSS, \u0430 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0443 <code>&lt;img&gt;<\/code> \u043f\u0440\u043e\u0441\u0442\u043e <em>\u0434\u0440\u0443\u0433\u0430\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430<\/em>\u00a0\u2014\u00a0\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 <em>\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/em>, \u0430 \u043d\u0435 <em>\u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f<\/em>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>&lt;img&gt;<\/code> \u0440\u0430\u0434\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043c\u0438\u043d\u0443 \u043f\u043e\u0434 \u0441\u0432\u043e\u0439 \u043a\u043e\u0434. \u0413\u0434\u0435 \u043e\u043d\u0430 \u0432\u0437\u043e\u0440\u0432\u0451\u0442\u0441\u044f\u00a0\u2014\u00a0\u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043d\u043e \u043d\u043e\u0433\u0443 \u043e\u0442\u043e\u0440\u0432\u0451\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u00a0\u2014\u00a0accessibility, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u043d\u043e \u0442\u0435\u043c, \u043a\u0442\u043e \u043d\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0435\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443: \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u0430\u0441\u0430, \u043f\u0440\u0438\u043d\u044f\u0432 \u0435\u0433\u043e \u0437\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044e, \u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0437\u0430\u0431\u043e\u0442\u043b\u0438\u0432\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0444\u043e\u043a\u0443\u0441\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 Chromium \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>focusin<\/code> \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0438, \u0447\u0442\u043e \u0445\u0443\u0436\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0435 \u043c\u043e\u0433 \u0438\u0437\u0432\u043d\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u2026 \u0430 \u0438\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u0434\u0435 Chromium, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u0430\u043c\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0435 \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u043e\u043d\u0435\u0440\u0432\u043d\u044b\u0445).<\/p>\n<\/blockquote>\n<p>\u0418\u0437 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e\u00a0\u2014\u00a0\u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u0435 \u043c\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u043c\u0441\u044f \u0441 \u0442\u0430\u043a\u043e\u0439 \u0448\u0442\u0443\u043a\u043e\u0439, \u043a\u0430\u043a <em>\u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u0430<\/em>: <code>@set-height: true<\/code>. \u041f\u043e\u0434 \u0442\u0430\u043a\u0438\u043c \u0443\u0433\u043b\u043e\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0432\u0441\u0451 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0435 \u043f\u0440\u0430\u0432\u0434\u0430 \u043b\u0438? \u042d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432\u044b\u0441\u043e\u0442\u044b (\u0448\u0438\u0440\u0438\u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430). \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 <code>&amp; when (@set-height)<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0432 LESS \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>if<\/code>.<\/p>\n<h3>\u276f \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0417\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435\u00a0\u2014\u00a0\u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0434\u0430\u0447\u043d\u0430\u044f \u0438\u0434\u0435\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e, \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u0441\u0435\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u043d\u0430\u0434\u043e \u043f\u0440\u044f\u043c\u043e \u0438\u043b\u0438 \u043a\u043e\u0441\u0432\u0435\u043d\u043d\u043e (\u0447\u0435\u0440\u0435\u0437 em&#8217;\u044b) \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432 rem&#8217;\u0430\u0445. \u041f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438\u0449\u0438\u0442\u0435 \u0432 <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/874486\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a>). \u0410 \u043f\u0440\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0438 \u0434\u0432\u0438\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u0441\u0432\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u0441\u043a\u0435\u0439\u043b\u0438\u043d\u0433\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0432\u0441\u0435\u0433\u043e UI \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Telegram).<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/4n\/ny\/gx\/4nnygxzawo_n1fbaz1-nscsrs34.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/4n\/ny\/gx\/4nnygxzawo_n1fbaz1-nscsrs34.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/4n\/ny\/gx\/4nnygxzawo_n1fbaz1-nscsrs34.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0442\u0435\u043a\u0441\u0442 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b\u00a0\u2014\u00a0\u043d\u0435\u0442. \u0425\u0443\u0436\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u0440\u0443\u0448\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0440\u0430\u0437\u044a\u0435\u0437\u0436\u0430\u043d\u0438\u044f\u043c \u0438 \u043d\u0430\u043f\u043e\u043b\u0437\u0430\u043d\u0438\u044f\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043c\u0438\u0440\u0438\u0442\u044c\u0441\u044f \u0441 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u0430\u043c\u0438 \u0430\u043f\u0441\u043a\u0435\u0439\u043b\u0438\u043d\u0433\u0430\/\u0434\u0430\u0443\u043d\u0441\u043a\u0435\u0439\u043b\u0438\u043d\u0433\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 rem&#8217;\u0430\u0445 \u043f\u0440\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0441\u0430\u043c\u0438\u043c \u0438\u0445 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e, \u043f\u0443\u0441\u0442\u044c \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u0434\u0430\u043f\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432:<\/p>\n<pre><code class=\"css\">\/\/ Makes an element the same size in rem as the given image. .adaptive-element-size-of-img(@src, @set-height: true) { @width: image-width(@src); @height: image-height(@src);  width: rp(unit(@width));  &amp; when (@set-height) { height: rp(unit(@height)); } }  \/\/ Adds a background image and sets background size in rem. .adaptive-background-size-of-img(@src) { @width: image-width(@src); @height: image-height(@src);  background-size: rp(unit(@width)) rp(unit(@height)); background-image: url(@src); }  \/\/ Makes an element the same size in rem as the given image. \/\/ Adds the image as background and sets background size in rem. .adaptive-background-and-element-size-of-img(@src) { .adaptive-element-size-of-img(@src); .adaptive-background-size-of-img(@src); } <\/code><\/pre>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e <code>image-width()<\/code> \u0438 <code>image-height()<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043d\u0435 \u0447\u0438\u0441\u043b\u0430, \u043e\u043d\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u043e\u0442 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>unit()<\/code>. \u0417\u0430\u0442\u0435\u043c \u0432 \u0434\u0435\u043b\u043e \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>rp()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0437 \u0447\u0438\u0441\u043b\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 rem&#8217;\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430.<\/p>\n<p>\u0418 \u0433\u043e\u0442\u043e\u0432\u043e: \u043f\u043e\u043c\u0435\u043d\u044f\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0438\u043a\u0441\u0438\u043d \u0438 \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e <code>&lt;img&gt;<\/code>. \u0414\u0430, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043a\u0430\u043a \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u043e\u0439 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438\u043c \u0442\u0435\u0433\u043e\u043c. \u041d\u0443 \u0430 \u043f\u043e\u0441\u043b\u0435, \u0432 <code>main.less<\/code>, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c:<\/p>\n<pre><code class=\"css\">\/\/ &lt;img src=\"\"&gt; @adaptive-imgs: \"images\/shop\/logo.png\", \"images\/thumbnails\/aliexpress.com.png\", \"images\/boost.png\", \u2026 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u2026 \"images\/cloud-core.png\";  each(@adaptive-imgs, { img[src=@{value}] { .adaptive-element-size-of-img('..\/@{value}', false); \/\/ Don't set height to avoid conflicts with fluid images. } }); <\/code><\/pre>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 <strong>\u0432\u0441\u0435\u0433\u0434\u0430<\/strong> \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439. \u0412\u0440\u044f\u0434 \u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0444\u0430\u0439\u043b\u0430 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430: \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043a\u0430\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044e, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437\u00a0\u2014\u00a0\u043a\u0430\u043a \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u0436\u0435 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u044f\u0432\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u0443\u0442-\u0442\u043e \u043d\u0430\u043c \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>@set-height<\/code>. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0434\u043b\u044f <code>&lt;img&gt;<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u0438\u043d\u044b \u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u0444\u0430\u0439\u043b\u0430, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u043c\u0443\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043d\u0435 \u0432\u043b\u0435\u0437\u0430\u044e\u0449\u0438\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <code>min-width<\/code>\/<code>max-width<\/code> \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n<h3>\u276f \u0421\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0451\u0432<\/h3>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0441\u0442\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0438\u0437 \u043d\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u0438:<\/p>\n<pre><code class=\"css\">@images: '..\/images\/image1.png', '..\/images\/image2.png', '..\/images\/image3.png';  \/\/ \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c: .assert-images-are-square(@images); .assert-images-are-the-same-size(@images); <\/code><\/pre>\n<p>\u041d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0443\u0434\u043e\u0431\u043d\u043e. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0442\u044c, \u0440\u0430\u0437\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c, \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u00ab\u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u00bb \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u00ab\u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0435\u0442\u0430\u043b\u0435\u0439\u00bb \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438). \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0437\u0430\u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM\u00a0\u2014\u00a0\u043a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background-image<\/code> \u0443\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u043e\u0438\u00a0\u2014\u00a0\u0441\u043f\u0438\u0441\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<p>\u0418 \u0432\u0441\u0451 \u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e, \u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043b\u044f <code>background-image<\/code> <em>\u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0432\u0451\u0440\u043d\u0443\u0442<\/em> \u0432 <code>url()<\/code>:<\/p>\n<pre><code class=\"css\">background-image: url(..\/images\/image1.png), url(..\/images\/image2.png), url(..\/images\/image3.png); <\/code><\/pre>\n<p>\u0418 \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c. \u0416\u0430\u043b\u044c, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u043d\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c (\u0447\u0442\u043e <code>..<\/code> \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u043f\u0443\u0442\u0438), \u043d\u0438 \u043f\u0440\u043e\u0449\u0430\u0442\u044c (\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u0451\u0440\u0442\u043a\u0438).<\/p>\n<p>\u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f <code>url()<\/code> \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043d\u0430\u043c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c (\u043f\u0440\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0442.\u043f.).<\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043a \u0441\u0442\u0440\u043e\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0441\u043e\u0447\u0442\u0443\u0442 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>background-image<\/code>, \u0441\u043e\u0441\u0442\u0440\u044f\u043f\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u0444\u0430\u0439\u043b <code>less-lib.js<\/code>):<\/p>\n<pre><code class=\"javascript\">functions.add('multipleBackgrounds', function (list) { if (Array.isArray(list.value)) return list.value.reduce((a, v) =&gt; (a ? a + ', ' : a) + `url(${v.value})`, '');  return `url(${list.value})`; \/\/ For single element lists. }); <\/code><\/pre>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">@images: '..\/images\/image1.png', '..\/images\/image2.png', '..\/images\/image3.png';  background-image: multipleBackgrounds(@images); <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u044f \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u043a\u0430\u043a \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043e\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0432 LESS).<\/p>\n<p>\u0410 \u0432\u043e\u043e\u0431\u0449\u0435, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f, \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u0449\u0438\u043d\u0430 \u043f\u043e\u043a\u0430 \u0435\u0449\u0451 \u043d\u0435 \u043f\u0440\u043e\u043d\u0438\u043a\u043b\u0430 \u0432\u043e \u0432\u0441\u0435 \u0441\u043b\u043e\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u044f\u0437\u044b\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043a\u0438 (\u0430 \u0432 LESS \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u0432\u0435\u0434\u0451\u043d <a href=\"https:\/\/lesscss.org\/functions\/#list-functions\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/a>), \u0442\u043e \u0442\u0430\u043a \u0438 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u043b\u044f\u043c\u0431\u0434 \u0438 map\/reduce. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432\u0441\u0451 \u044d\u0442\u043e \u00ab\u0435\u0441\u0442\u044c \u0443 \u043d\u0430\u0441 \u0434\u043e\u043c\u0430\u00bb, \u0442\u043e \u0431\u0438\u0448\u044c \u0432 Javascript&#8217;\u0435, \u0438 \u043b\u0435\u0433\u043a\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0432 LESS.<\/p>\n<h3>\u276f \u041a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432<\/h3>\n<p>\u041a \u0432\u043e\u043f\u0440\u043e\u0441\u0443 \u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0445 \u0432\u0435\u0449\u0430\u0445 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438. \u041a\u0430\u043a\u0430\u044f \u0443\u0436 \u0442\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u0449\u0438\u043d\u0430, \u043a\u0430\u043a\u0438\u0435 \u043b\u044f\u043c\u0431\u0434\u044b! \u0423\u0432\u044b, \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0432 LESS \u043d\u0435\u0442 \u0434\u0430\u0436\u0435 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0430\u0442\u044c \u0438 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u0443\u0442\u0451\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 <code>less-lib.js<\/code> \u0442\u0430\u043a\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">functions.add('concatLists', function (...args) { const values = [];  for (const arg of args) { if (arg.value instanceof Array) { values.push(...arg.value); } else { values.push(arg); } }  return new tree.Value(values); }); <\/code><\/pre>\n<p>\u0418 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"css\">@compass-dial-layer-images: '..\/images\/compass\/layer9.png', '..\/images\/compass\/layer8.png', '..\/images\/compass\/layer7.png', '..\/images\/compass\/layer6.png', '..\/images\/compass\/layer5.png', '..\/images\/compass\/layer4.png', '..\/images\/compass\/layer3.png', '..\/images\/compass\/layer2.png', '..\/images\/compass\/layer1.png';  @compass-needle-layer-images: '..\/images\/compass\/layer11.png', '..\/images\/compass\/layer10.png';  @compass-glass-layer-images: '..\/images\/compass\/layer14.png', '..\/images\/compass\/layer13.png', '..\/images\/compass\/layer12.png';  @compass-bezel-layer-images: '..\/images\/compass\/layer15.png';  \/\/ \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d:  @compass-layer-images: concatLists(@compass-bezel-layer-images, @compass-glass-layer-images, @compass-needle-layer-images, @compass-dial-layer-images);  \/\/ \u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u0436\u0434\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \/\/ \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 background-image: multipleBackgrounds(), \/\/ \u0430 \u043e\u0431\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432 assert'\u044b. <\/code><\/pre>\n<h2>\u0414\u0432\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u0441 \u0447\u0435\u0433\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c: \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u0443\u0442\u0438\u043b\u0438\u0442 \u043a \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439.<\/p>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 <code>.p-0<\/code> \u0438 <code>.rounded-1<\/code>, \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>.product-card<\/code>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0432 HTML \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0433\u043e\u043b\u044b\u0439 \u0441\u043a\u0435\u043b\u0435\u0442, \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044f\u0441\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0432 LESS (\u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435\u00a0\u2014\u00a0<code>main.less<\/code>), \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (<code>.product-card<\/code>) \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b.<\/p>\n<p>\u041f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0442\u043e\u0436\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439! \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0441 \u0435\u0451 \u043a\u043e\u0434\u043e\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0435\u0433\u0447\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u0432\u0448\u0438\u0441\u044c.<\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u041e\u043d \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u0435\u043d, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u0430\u043a \u0438 \u0432 \u0447\u0438\u0441\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445:<\/p>\n<pre><code>&lt;nav aria-label=\"Main menu\"&gt; &lt;svg&gt; &lt;use href=\"#svg-lib_menu-icon\"&gt;&lt;\/use&gt; &lt;\/svg&gt;  &lt;ul&gt; &lt;!-- \u041f\u0443\u043d\u043a\u0442\u044b \u043c\u0435\u043d\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u2026 --&gt; &lt;li&gt;&lt;a class=\"menu-file\" href=\"#\"&gt;File&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a class=\"menu-edit\" href=\"#\"&gt;Edit&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a class=\"menu-view\" href=\"#\"&gt;View&lt;\/a&gt;&lt;\/li&gt;  &lt;!-- \u2026\u0438\u043b\u0438 \u043c\u0435\u043d\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b --&gt; &lt;li&gt;&lt;a href=\"#home\"&gt;Home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=\"#about\"&gt;About&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/nav&gt;  &lt;main&gt;  &lt;section class=\"about\"&gt; \u2026 &lt;\/section&gt;  &lt;section class=\"contact\"&gt; \u2026 &lt;\/section&gt;  \u2026\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438\u2026 &lt;\/main&gt; <\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u044d\u0442\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0431\u0435\u0437\u0436\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430. \u0412 \u043d\u0435\u0439 \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e.<\/p>\n<p>\u0418\u043a\u043e\u043d\u043a\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u0435\u043d\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <code>&lt;svg&gt;<\/code> \u0438 <code>&lt;use&gt;<\/code>, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0438\u043a\u043e\u043d\u043e\u043a <code>&lt;svg&gt;&lt;defs&gt;&lt;\/defs&gt;&lt;\/svg&gt;<\/code>. (\u041f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a \u044f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 SVG, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u0443-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043c\u043e\u0433\u0443 \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u044f \u043d\u0435 \u043d\u0430\u0448\u0451\u043b).<\/p>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a (<code>&lt;ul&gt;<\/code>, <code>&lt;li&gt;<\/code>) \u043d\u0443\u0436\u0435\u043d \u0447\u0438\u0441\u0442\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438. (\u041f\u0435\u0440\u0435\u0444\u0440\u0430\u0437\u0438\u0440\u0443\u044f \u0437\u043d\u0430\u043c\u0435\u043d\u0438\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0432\u043e\u0435\u043d\u043d\u043e\u0439 \u043a\u0430\u0444\u0435\u0434\u0440\u044b: \u00ab\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0432\u0435\u0434\u044c \u044d\u0442\u043e \u0436\u0435, \u043a\u0430\u043a-\u043d\u0438\u043a\u0430\u043a, \u0441\u043f\u0438\u0441\u043e\u043a!\u00bb).<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0435\u0441\u043b\u0438 \u0443 \u0441\u0441\u044b\u043b\u043e\u043a \u044f\u0432\u043d\u043e \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0430\u0434\u0440\u0435\u0441 <code>href<\/code>, \u0434\u043b\u044f \u0430\u0434\u0440\u0435\u0441\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043e\u043d\u0438 \u0440\u0430\u0437\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438. (\u042f <em>\u043f\u043e\u0447\u0442\u0438<\/em> \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>id<\/code> \u0432 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u0447\u0435\u0433\u043e \u0438 \u0432\u0430\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e. \u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>id<\/code> \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445, \u0438 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0430\u043d\u0430\u043b\u043e\u0433 \u044d\u0442\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f CSS (\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0430 LESS)\u00a0\u2014\u00a0\u043f\u0440\u043e \u0432\u0441\u0451 \u044d\u0442\u043e \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438).<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044e. \u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0433\u043e <code>main.less<\/code>:<\/p>\n<pre><code class=\"css\">body { nav { \u2026\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u0435\u043d\u044e\u2026  svg { .svg-inline(); \u2026 }  ul &gt; li { \u2026\u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e\u2026  a { \u2026\u0446\u0432\u0435\u0442\u0430 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e\u2026 } }  &amp;.collapsed { \u2026\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u043d\u044e\u2026 } }  main { section.about { \u2026 }  section.contact { \u2026 } } } <\/code><\/pre>\n<p>\u0427\u0442\u043e \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c?<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u043e\u0432\u0442\u043e\u0440\u044e\u0441\u044c \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437, \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u0449\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b-\u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0438\u0445 \u043a\u0430\u043a \u043c\u0438\u043a\u0441\u0438\u043d\u044b. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043e\u0431\u0435\u0437\u0436\u0438\u0440\u0435\u043d\u043d\u043e\u0439. \u0412 \u043c\u043e\u0451\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441 <code>svg-inline<\/code>:<\/p>\n<pre><code class=\"css\">.svg-inline { fill: currentColor; display: inline; height: 1em; vertical-align: middle; } <\/code><\/pre>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0435\u0449\u0451 \u0438\u043a\u043e\u043d\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0442\u0435\u043a\u0441\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u0446\u0432\u0435\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u043c\u0435\u043b\u0438 \u0442\u0443 \u0436\u0435 \u0432\u044b\u0441\u043e\u0442\u0443, \u0442\u043e \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>svg-inline<\/code> \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG-\u043a\u043e\u0434 \u043e\u0442\u043a\u0443\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0441 <a href=\"https:\/\/icons.getbootstrap.com\/\" rel=\"noopener noreferrer nofollow\">Bootstrap Icons<\/a>, \u0447\u0442\u043e, \u043f\u043e-\u043c\u043e\u0435\u043c\u0443, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435. (\u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0435 \u043d\u0430\u0434\u043e \u0442\u0430\u0449\u0438\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0444\u0430\u0439\u043b \u0432 \u0448\u0440\u0438\u0444\u0442\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435).<\/p>\n<p>\u0410 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0437\u0430 \u0441\u0447\u0451\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0443 \u043d\u0430\u0441 \u0432 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c LESS \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0447\u0442\u043e \u0438 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435. \u0412\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u043c\u044b \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u0438\u0431\u043e \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (\u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b), \u043b\u0438\u0431\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u0445 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0432\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043e\u043d\u0438 \u043d\u0435 \u043c\u0435\u0448\u0430\u044e\u0442. \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0441\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 LESS \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043b\u044e\u0441-\u043c\u0438\u043d\u0443\u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 (\u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044f \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438: \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445-\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0442.\u0434.), \u044d\u0442\u043e \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c CSS \u0438 \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043d\u044f\u043c\u0438 \u0443\u0442\u0438\u043b\u0438\u0442.<\/p>\n<hr\/>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0430\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 LESS, \u043e \u0442\u043e\u043c, \u0433\u0434\u0435 \u043e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043b\u043e\u0445\u043e (\u0441\u043f\u043e\u0439\u043b\u0435\u0440: \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438) \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u0431\u043e\u0440\u043e\u0442\u044c\u0441\u044f. \u0417\u0430\u043e\u0434\u043d\u043e, \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u0437\u0430\u0447\u0435\u043c \u043c\u043d\u0435 \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u0430\u044f (!) \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0433\u0443\u0438\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b\u0448\u0435 \u044f \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 JS-\u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0443 \u0442\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0442\u0435\u043c\u0443 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445)\u00a0\u2014\u00a0\u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0432\u0430\u0436\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438.<\/p>\n<p>\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u043a\u0430\u0436\u0443 \u0435\u0449\u0451 (\u0431\u0435\u0441\u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e, \u043d\u0430 \u0447\u0442\u043e \u0440\u0443\u0433\u0430\u043b\u0438\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0432 \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u0440\u0430\u0437\u043e\u0432\u00a0\u2014\u00a0\u0443\u0436 \u0438\u0437\u0432\u0438\u043d\u0438\u0442\u0435, \u0432\u0441\u0435\u0433\u0434\u0430 \u043b\u044e\u0431\u0438\u043b \u0444\u043e\u0440\u043c\u0430\u0442 \u00ab\u0445\u043e\u0437\u044f\u0439\u043a\u0435 \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443\u00bb) \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u043c\u043d\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u043a\u0430\u0434\u0440\u0430\u0445.<\/p>\n<p>\u0418 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0430\u0439\u043a\u0430\u0439\u0442\u0435 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c, \u0435\u0441\u043b\u0438 \u043c\u043e\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u044f \u0438\u0445 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b. \ud83d\ude09<\/p>\n<hr\/>\n<blockquote>\n<p><a href=\"https:\/\/t.me\/timewebru\" rel=\"noopener noreferrer nofollow\"><strong>\u041d\u043e\u0432\u043e\u0441\u0442\u0438, \u043e\u0431\u0437\u043e\u0440\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u044b \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Timeweb.Cloud &#8212; \u0432 \u043d\u0430\u0448\u0435\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435<\/strong><\/a> <strong>\u21a9<\/strong><\/p>\n<\/blockquote>\n<p><strong><em>\u041f\u0435\u0440\u0435\u0434 \u043e\u043f\u043b\u0430\u0442\u043e\u0439 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u00ab\u0411\u043e\u043d\u0443\u0441\u044b \u0438 \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434\u044b\u00bb \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f <\/em><\/strong><a href=\"https:\/\/timeweb.cloud\/?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=promo\" rel=\"noopener noreferrer nofollow\"><strong><em>\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434<\/em><\/strong><\/a><strong><em> \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043a\u044d\u0448\u0431\u044d\u043a \u043d\u0430 \u0431\u0430\u043b\u0430\u043d\u0441.<\/em><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/930900\/\"> https:\/\/habr.com\/ru\/articles\/930900\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/926720\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u0430\u0445 LESS: \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445, \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0451\u043c\u0430\u0445. \u0410 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0432\u0435\u0449\u0430\u0445, \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435\u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u043e\u043c \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 LESS-\u043a\u043e\u0434\u0430 \u0432 CSS;<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0437 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u043e\u043b\u0435\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 HTML \u0438 CSS.<\/p>\n<\/li>\n<\/ul>\n<p>\u0410 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f LESS-\u043a\u043e\u0434\u0430 \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 LESS \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043d\u0430 Javascript&#8217;\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0432 \u0440\u043e\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0430 \u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432);<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 LESS.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0442!<\/p>\n<figure class=\"\"><\/figure>\n<h2>\u276f \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<blockquote>\n<p><em>\u0412\u0441\u0451 \u043e\u0442 \u0443\u0436\u0430\u0441\u0430 \u0440\u044b\u0434\u0430\u0435\u0442<\/em><br \/> <em>\u0418 \u0434\u0440\u043e\u0436\u0438\u0442 \u043a\u0430\u043a \u0431\u0430\u043d\u043d\u044b\u0439 \u043b\u0438\u0441\u0442!<\/em><br \/> <em>\u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442<\/em><br \/> <em>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 LESS&#8217;\u0438\u0441\u0442.<\/em><\/p>\n<p>\u2014\u00a0\u041f\u043e\u0447\u0442\u0438 \u0410\u0411\u0421<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u0438\u0437\u043b\u043e\u0436\u0443 \u0441\u0432\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432\u00a0\u2014\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0442\u0435\u043c, \u043a\u0442\u043e \u043d\u0430\u0439\u0434\u0451\u0442 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432 \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0435\u0433\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 (\u0438 \u0447\u0442\u043e \u0441 \u043d\u0438\u043c\u0438 \u043f\u043e\u0442\u043e\u043c \u0434\u0435\u043b\u0430\u0442\u044c).<\/p>\n<figure class=\"\"><\/figure>\n<h3>\u276f main.less (\u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f)<\/h3>\n<p>\u041a\u0430\u043a \u044f \u043e\u0431\u0435\u0449\u0430\u043b, \u0434\u0430\u043b\u0435\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439. \u041f\u043e\u043a\u0430 \u0436\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 (HTML) \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 LESS.<\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 (<code>index.html<\/code>). \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0444\u0430\u0439\u043b \u0441 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c <code>main.less<\/code>. \u0412 \u043d\u0435\u0433\u043e \u0432\u043e\u0439\u0434\u0443\u0442 \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 <code>index.html<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0430 CSS.<\/p>\n<p>\u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0430\u0448\u0443 IDE \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0444\u0430\u0439\u043b <code>main.less<\/code> \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 IDE \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u00a0\u2014\u00a0\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <strong>Visual Studio 2022<\/strong> \u0438 \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Failwyn.WebCompiler64\" rel=\"noopener noreferrer nofollow\">Web Compiler 2022+<\/a>. \u0412\u044b \u0436\u0435, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c <strong>VS Code<\/strong>, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=mrcrowl.easy-less\" rel=\"noopener noreferrer nofollow\">Easy LESS<\/a>. \u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 (<code>main.less<\/code>\u00a0\u2192\u00a0<code><strong>main.css<\/strong><\/code>) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e <em>source map<\/em> \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 (\u0447\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435).<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 <code>main.less<\/code> \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0442\u0440\u0451\u0445 \u0444\u0430\u0439\u043b\u043e\u0432: \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e <code>main.css<\/code>, \u0435\u0433\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 <code>main.min.css<\/code> \u0438 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0433\u043e <code>main.min.css.map<\/code>. \u0424\u0430\u0439\u043b <code>main.css<\/code> \u043d\u0443\u0436\u0435\u043d \u043d\u0430\u043c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. <code>main.min.css<\/code> \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d (\u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0431\u0438\u043b\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebView\/Chromium), \u0441\u0441\u044b\u043b\u0430\u044f\u0441\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0438\u0437 HTML \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c:<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"css\/main.min.css\"&gt; <\/code><\/pre>\n<p>\u041d\u0443 \u0430 <code>main.min.css.map<\/code> \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c <strong>DevTools<\/strong>. \u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u043e\u043c\u0435\u0440\u0430 \u0441\u0442\u0440\u043e\u043a \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 (\u0430 \u043d\u0435 \u0432\u0435\u0447\u043d\u043e\u0435 <code>1<\/code> \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430).<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u043e <code>main.less<\/code> \u044f \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0442\u0440\u0438 \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 LESS.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 CSS.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n<pre><code class=\"css\">\/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 @debug: true;  \/\/ \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 LESS @import \"lib\";  \/\/ \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 CSS @import \"animations.css\"; <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445? \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438:<\/p>\n<pre><code class=\"css\">.debugA when (@debug = true) { background-color: aliceblue; } <\/code><\/pre>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 <code>.debugA<\/code> (\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>.debugA<\/code>, \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background-color<\/code> \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 <code>.debugA()<\/code> \u043a\u0430\u043a \u043c\u0438\u043a\u0441\u0438\u043d\u0430) \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>@import<\/code> (\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0430\u044f <code>#include<\/code> \u0438\u0437 C\/C++) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 LESS-\u0444\u0430\u0439\u043b\u044b, \u0442\u0430\u043a \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 CSS&#8217;\u043d\u044b\u0435. \u041f\u0440\u0438 \u0432\u0441\u0442\u0430\u0432\u043a\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 LESS, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>@import \"lib\";<\/code> \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>lib.less<\/code>). \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d (\u0438\u043d\u0430\u0447\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u0433\u043b\u0443\u043f\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?).<\/p>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0445 CSS-\u0444\u0430\u0439\u043b\u043e\u0432, \u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0435\u0439 \u043a\u043e\u0434 \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 CSS:<\/p>\n<pre><code class=\"css\">@keyframes sys-rotate-from-0-to-360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }  @keyframes sys-opacity-from-0-to-1 { from { opacity: 0; } to { opacity: 1; } }  @keyframes sys-opacity-from-1-to-0 { from { opacity: 1; } to { opacity: 0; } }  \/* \u2026\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. *\/ <\/code><\/pre>\n<p>\u0422\u0430\u043c \u0436\u0435, \u0432 <code>main.less<\/code>, \u044f \u043f\u0438\u0448\u0443 \u0432\u0441\u0435 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b (\u0442\u043e \u0435\u0441\u0442\u044c, \u0442\u0430\u043a\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u044b\u0441\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 <code>main.css<\/code>). \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"css\">\/\/ Mixin for a button with a nested SVG icon. .icon-button(@size) { .size-and-font(@size); .center-center();  background-color: transparent; border: none; }  .code-toolbar { \u2026 &amp; &gt; button { .icon-button(rp(32));  opacity: 0; \u2026 } }  .btn-close-dialog { .icon-button(rp(36)); \u2026 } <\/code><\/pre>\n<h3>\u276f lib.less (\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u0442.\u043f.)<\/h3>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u044b\u0445, \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 LESS-\u0444\u0430\u0439\u043b\u0430\u0445 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c\u0441\u044f \u043e\u0434\u043d\u043e\u0439\u00a0\u2014\u00a0<code>lib.less<\/code>.<\/p>\n<p>\u0412\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u043e <code>lib.less<\/code> \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b:<\/p>\n<pre><code class=\"css\">@plugin \"less-lib.js\"; <\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 LESS, \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0441\u0432\u043e\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 LESS, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u043a\u0430\u043a \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445, \u0442\u0430\u043a \u0438 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u0432\u0435\u0434\u044c \u044d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 <code>main.less<\/code> \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c). \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u00ab\u043c\u0430\u043a\u0440\u043e\u0441\u00bb <code>rp()<\/code> \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0434\u043b\u044f \u043f\u0443\u0449\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u00ab\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445\u00bb \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0432\u043c\u0435\u0441\u0442\u043e rem&#8217;\u043e\u0432? \u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<p>\u0427\u0442\u043e \u0435\u0449\u0451 \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043e \u0432 <code>lib.less<\/code>?<\/p>\n<p>\u0421\u043f\u0438\u0441\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>@range-track<\/code> \u0438 <code>@range-thumb<\/code>.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>@text-input<\/code>.<\/p>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u043e-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>.any<\/code>.<\/p>\n<p>\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">\/\/ Sets width and height. .size(@w, @h) { width: @w; height: @h; }  \/\/ Sets the same width and height. .size(@size) { .size(@size, @size); }  \/\/ Sets the same width, height and 1em. .size-and-font(@size) { .size(@size);  font-size: @size; }  \/\/ Sets left and top. Makes an element absolutely positioned. .pos(@l, @t) { left: @l; top: @t;  position: absolute; }  \/\/ Sets the same left and top. Makes an element absolutely positioned. .pos(@offset) { .pos(@offset, @offset); }  \/\/ Sets right and top. Makes an element absolutely positioned. .r-pos(@r, @t) { right: @r; top: @t;  position: absolute; }  \/\/ Sets the same right and top. &lt;akes an element absolutely positioned. .r-pos(@offset) { .r-pos(@offset, @offset); }  \/\/ Sets right and bottom. Makes an element absolutely positioned. .rb-pos(@r, @b) { right: @r; bottom: @b;  position: absolute; }  \/\/ Sets the same right and bottom. Makes an element absolutely positioned. .rb-pos(@offset) { .rb-pos(@offset, @offset); }  \/\/ Sets left and bottom. Makes an element absolutely positioned. .lb-pos(@l, @b) { left: @l; bottom: @b;  position: absolute; }  \/\/ Sets the same left and bottom. Makes an element absolutely positioned. .lb-pos(@offset) { .lb-pos(@offset, @offset); }  \/\/ Sets all four: left, top, right and bottom. Makes an element absolutely positioned. .l-t-r-b(@l, @t, @r, @b) { left: @l; top: @t; right: @r; bottom: @b;  position: absolute; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">\/\/ Makes an element round. .circle() { border-radius: 100%; }  \/\/ Flips an element vertically. .flip-vertically() { transform: scaleY(-1); }  \/\/ Clears out any default style of a control. .reset-control() { appearance: none; background-color: transparent; }  \/\/ Makes a control vertical. .vertical-control() { writing-mode: vertical-lr; direction: rtl; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h3>\u276f less-lib.js (\u043f\u043b\u0430\u0433\u0438\u043d\u044b LESS, \u0442.\u0435. \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438)<\/h3>\n<p>\u041a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 Javascript. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e, \u0444\u0430\u0439\u043b \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 CSS, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u0435\u0440\u0436\u0443 \u0435\u0433\u043e \u0432 \u0442\u043e\u0439 \u0436\u0435 \u043f\u0430\u043f\u043a\u0435, \u0433\u0434\u0435 \u0438 \u0432\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 LESS\/CSS.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b LESS<\/h2>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443, \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u043c\u0435\u0436\u0434\u0443 LESS \u0438 SASS, \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e LESS? \u041f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Javascript, \u0441 \u043f\u0440\u0438\u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u044e\u0437\u0435\u0440\u0441\u043a\u0438\u0435 JS-\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u042f \u0437\u043d\u0430\u043b, \u0447\u0442\u043e \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e (\u043f\u0440\u0438\u0447\u0451\u043c, \u0441\u043a\u043e\u0440\u0435\u0435, \u0440\u0430\u043d\u043e) \u043c\u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f <s>\u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0438 \u043d\u0430 \u044d\u0442\u0443 \u0434\u0440\u044f\u043d\u044c<\/s> \u043d\u0430\u0447\u0430\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432 \u044f\u0437\u044b\u043a\u0435 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb.<\/p>\n<figure class=\"\"><\/figure>\n<p>\u0422\u0430\u043a \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c \u00ab\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438\u00bb \u043d\u0430 \u0437\u0430\u043c\u0435\u043d\u0443 rem&#8217;\u0430\u043c, \u043d\u043e \u0438\u043c\u0438 \u0434\u0435\u043b\u043e \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 <code>less-lib.js<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ 1. \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0433\u0443\u0438\u0434\u043e\u0432:  \/\/ 'crypto' interface is not available in some LESS-compiling environments. function getGuid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(\/[xy]\/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r &amp; 0x3 | 0x8); return v.toString(16); }); }  \u2026  registerPlugin ( { install: function (less, pluginManager, functions) {  \/\/ 2. \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u0437 LESS:  functions.add('myFunction1', function (parameters) { return \u2026; });  functions.add('myFunction2', function (parameters) { return \u2026; });  \u2026 } } ) <\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c (<code>myFunction1()<\/code>, <code>myFunction2()<\/code> \u0438 \u0442.\u0434.), \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u0438\u0437 LESS \u043d\u0430\u0440\u0430\u0432\u043d\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (\u0442\u0430\u043a\u0438\u043c\u0438, \u043a\u0430\u043a <code>e()<\/code>, <code>each()<\/code> \u0438 <code>range()<\/code>, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438).<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438. \u0412\u043e <strong>\u0432\u0441\u0435\u0445<\/strong> \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435 <code>value<\/code>, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-473655","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/473655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=473655"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/473655\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=473655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=473655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=473655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}