{"id":467520,"date":"2025-07-18T22:17:32","date_gmt":"2025-07-18T22:17:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=467520"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=467520","title":{"rendered":"<span>\u041a\u0430\u043a \u044f \u043f\u043e\u043b\u044e\u0431\u0438\u043b LESS \u0438 \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0441\u044f \u043e\u0442 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b \u0432 \u0441\u0432\u043e\u0451\u043c CSS-\u043a\u043e\u0434\u0435, \u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439<\/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 \u0441\u0438\u043b\u0443 \u043b\u0438\u0447\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 (\u044f \u0447\u0430\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0435 \u043d\u0430\u0434 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u0430 \u043d\u0430\u0434 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c\u0438 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0438\u0448\u0443 \u043d\u0430 HTML\/CSS), \u044f \u0434\u043e\u043b\u0433\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u043b \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u00ab\u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b CSS-\u0444\u0430\u0439\u043b \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0435\u0433\u043e\u00bb, \u0438 \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f CSS-\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0434\u043d\u043e, \u043d\u043e\u2026 \u0412 \u043d\u0430\u0448\u0438 \u0434\u043d\u0438 \u043e\u043d, \u0432 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u043d\u0438\u0447\u0443\u0442\u044c \u043d\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b, \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0440\u0430\u043d\u044c\u0448\u0435. \u0422\u0430\u043a \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 CSS (\u0430 \u043d\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0435 \u0435\u0433\u043e) \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0443\u0433\u043e\u0434\u043d\u043e (SPA, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0438, \u0432\u0435\u0431-\u0430\u043f\u043f\u044b \u0438 \u0442.\u0434.), \u043d\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c LESS \u0438\u043b\u0438 SASS\u00a0\u2014\u00a0\u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u043f\u043e\u0434 \u043a\u0430\u0442, \u0433\u0434\u0435 \u044f, \u0441\u0442\u0430\u0440\u0430\u044f\u0441\u044c \u043d\u0435 \u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u00ab\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439-\u043f\u0435\u0440\u0435\u0441\u043a\u0430\u0437-\u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430\u00bb, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 LESS, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445, \u0435\u0433\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0430\u043c\u0438 \u0438 \u043f\u0440\u0438\u0451\u043c\u0430\u043c\u0438 (\u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438). \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u0438\u0448\u0435\u0442\u0435 CSS, \u043d\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c: \u044f \u043f\u0440\u043e\u0432\u043e\u0436\u0443 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0438 LESS, \u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e\u0431 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u0410\u043b\u0430\u043d\u0430 \u041a\u0435\u044f.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ik\/o3\/zw\/iko3zwyqgwyktewrax0jkwsjcss.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/ik\/o3\/zw\/iko3zwyqgwyktewrax0jkwsjcss.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/ik\/o3\/zw\/iko3zwyqgwyktewrax0jkwsjcss.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u276f \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u0442\u044c<\/h2>\n<h3>\u276f LESS or SASS? That is the question<\/h3>\n<p>\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u044f \u043d\u0430\u0447\u0430\u043b \u043d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u043d\u043e \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b \u0435\u0433\u043e \u043f\u043e\u043b\u044e\u0431\u0438\u0442\u044c, \u0438 \u0441\u043c\u0435\u043b\u043e \u0441\u043a\u0430\u0436\u0443: \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043c\u043e\u0449\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b, \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u0432\u0441\u0451 \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0433\u043e\u043b\u043e\u0433\u043e CSS-\u043a\u043e\u0434\u0430! \u0418 \u0442\u0430\u043a \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0435 \u044f \u043e\u0434\u0438\u043d:<\/p>\n<blockquote>\n<p><em>so it seems like all the hype of being finally able to throw out sass, bootstrap etc, and use vanilla css in 2024, was just that.. hype. Something so very simple that continues to make css frameworks or preprocessors an unfortunate necessity still<\/em><\/p>\n<p>\u2014\u00a0\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c StackOverflow <a href=\"https:\/\/stackoverflow.com\/questions\/40722882\/css-native-variables-not-working-in-media-queries\" rel=\"noopener noreferrer nofollow\">\u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043d<\/a> \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445<\/p>\n<\/blockquote>\n<p>\u0425\u043e\u0442\u044f \u044f \u0438 \u0437\u043d\u0430\u044e \u043b\u044e\u0434\u0435\u0439, \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043b\u044e\u0431\u044b\u0435 DSL&#8217;\u0438 \u00ab\u043f\u0442\u0438\u0447\u044c\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c\u00bb, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u043d\u043e \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0439 DRY (\u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c CSS, \u0443\u0432\u044b, \u043d\u0435\u0443\u0441\u0442\u0440\u0430\u043d\u0438\u043c\u044b.<\/p>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0442\u0443\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 SASS (\u00abadvanced features\u00bb, \u00abrobustness\u00bb \u0438 \u0442.\u0434.), \u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c, \u0447\u0442\u043e \u044f \u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043d\u0451\u043c, \u0435\u0441\u043b\u0438 \u0431\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 SASS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u00ab\u0440\u043e\u0434\u043d\u044b\u0435\u00bb \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\u00a0\u2014\u00a0\u0432\u0435\u043b\u0438\u043a\u043e\u0435 \u0431\u043b\u0430\u0433\u043e. (\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438, \u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c, \u043a\u0430\u043a \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u0430 \u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439). \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u00a0\u2014\u00a0<strong>Bootstrap<\/strong>, \u043e \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/874486\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b<\/a> \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<p>\u042f \u0436\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 LESS (\u043a\u0430\u043a \u043d\u0435\u0442\u0440\u0443\u0434\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043e \u043d\u0451\u043c \u0434\u0430\u043b\u0435\u0435 \u0438 \u043f\u043e\u0439\u0434\u0451\u0442 \u0440\u0435\u0447\u044c), \u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 Javascript&#8217;\u0435. \u0415\u0433\u043e \u0436\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 (\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432).<\/p>\n<h3>\u276f LESS: \u044f\u0437\u044b\u043a \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, <strong>LESS<\/strong> (\u043e\u043d \u0436\u0435 <strong>LESSCSS<\/strong>) \u044d\u0442\u043e \u0441\u0430\u043c \u044f\u0437\u044b\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e \u0441\u0432\u043e\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0436\u0438\u0432\u0451\u0442 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"https:\/\/lesscss.org\/\" rel=\"noopener noreferrer nofollow\">https:\/\/lesscss.org\/<\/a>. \u0410 <strong>Less.js<\/strong>\u00a0\u2014\u00a0\u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f (\u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0437\u043d\u0430\u044e) \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0447\u0435\u0439 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435: <a href=\"https:\/\/github.com\/less\/less.js\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/less\/less.js<\/a>.<\/p>\n<p>\u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/github.com\/less\/less.js\/discussions\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0439<\/a> \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 \u00ab\u041a\u0430\u043a \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439-\u0442\u043e CSS?\u00bb, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u0440\u043e\u0431\u043e\u0442 \u0414\u043e\u0441\u044f (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0432\u043f\u043e\u043f\u0430\u0434). \u0418 \u0445\u043e\u0442\u044f \u0432 <em>readme.md<\/em> \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 <em>StackOverflow<\/em> \u043a\u0430\u043a \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u00ab\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u0439\u00bb, \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0437\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f SO-\u043a\u0440\u0438\u0437\u0438\u0441\u0430 \u0448\u0430\u043d\u0441\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435, \u044f \u0431\u044b \u0441\u043a\u0430\u0437\u0430\u043b, \u0432\u044b\u0448\u0435.<\/p>\n<p>\u0415\u0449\u0451 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u043f\u043e\u0440\u0442\u0438\u0442\u044c \u0431\u0430\u0433\u0438, \u0438 \u0438\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e. (\u041c\u043d\u0435, \u043a\u0430\u043a \u0441\u0443\u0440\u043e\u0432\u043e\u043c\u0443 \u0447\u0435\u043b\u044f\u0431\u0438\u043d\u0441\u043a\u043e\u043c\u0443 \u043c\u0443\u0436\u0438\u043a\u0443, \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u0434\u0435\u043d\u044c \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u043f\u0443\u0442\u0451\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u044f <code>:has()<\/code> \u0432 <code>:is()<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u043d \u0436\u0430\u043b\u043e\u0431\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u043b: <code>Missing\u00a0closing\u00a0')'<\/code>. \u0412\u043e\u0442 \u0442\u043e-\u0442\u043e \u0436\u0435!)<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ys\/ec\/fb\/ysecfbxz5idsrmu08khzxkiauc8.png\" alt=\"\u0412\u043e\u0442 \u0442\u043e-\u0442\u043e \u0436\u0435.\" title=\"\u0412\u043e\u0442 \u0442\u043e-\u0442\u043e \u0436\u0435.\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/ys\/ec\/fb\/ysecfbxz5idsrmu08khzxkiauc8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/ys\/ec\/fb\/ysecfbxz5idsrmu08khzxkiauc8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0412\u043e\u0442 \u0442\u043e-\u0442\u043e \u0436\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438\u00a0\u2014\u00a04.3.0 \u043e\u0442 09 \u0430\u043f\u0440\u0435\u043b\u044f 2025 \u0433\u043e\u0434\u0430. \u041d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437 \u0432 3 \u043c\u0435\u0441\u044f\u0446\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443, \u043a\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Javascript, \u0443 \u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0438\u0441\u043a\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 LESS, \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c .less-\u0444\u0430\u0439\u043b\u044b \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 CSS \u043d\u0430 \u043b\u0435\u0442\u0443, \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0431\u0435\u0437 \u043e\u0447\u0435\u043d\u044c \u0432\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e. \u0421\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0437\u0430\u0447\u0435\u043c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0435\u0434\u043d\u044b\u0445 \u044e\u0437\u0435\u0440\u043e\u0432 \u0440\u0430\u0441\u0447\u0451\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0431\u0438\u043b\u0434-\u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435\/\u0434\u0435\u043f\u043b\u043e\u0435. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u0448\u0438\u043d\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0438\u043c\u0435\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0432 \u0430\u0434\u0434\u043e\u043d\u0435 \u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u043d\u043e \u043a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u0439\u0442\u0438 \u0430\u0434\u0434\u043e\u043d \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 IDE, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0444\u0430\u0439\u043b\u044b .less \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438.<\/p>\n<p>\u0421\u0430\u043c \u044f, \u0432 \u0441\u0438\u043b\u0443 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 (\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f) \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c <strong>Visual Studio 2022<\/strong>, \u0438 \u043c\u043e\u0433\u0443 \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \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\u00a0Compiler\u00a02022+<\/a>, \u0445\u043e\u0442\u044f \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0438 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 IDE. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f <strong>Web Compiler 2022+<\/strong>, \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0430\u043f\u043a\u0443 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f) \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0433\u043e \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 .less. \u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0444\u0430\u0439\u043b. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u2026 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u0430\u044f. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u043c \u043e\u043a\u043e\u043b\u043e 10 \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 LESS, \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 CSS \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0435-\u0441\u043b\u0430\u0431\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434. \u0422\u0430\u043a \u0447\u0442\u043e, \u0438\u043b\u0438 \u0431\u0435\u0440\u0438\u0442\u0435 \u043c\u0430\u0448\u0438\u043d\u0443 \u043f\u043e\u043c\u043e\u0449\u043d\u0435\u0435, \u0438\u043b\u0438 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c F5 \u043f\u0430\u0440\u0443 \u0440\u0430\u0437, \u043f\u043e\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f IDE\u00a0\u2014\u00a0\u043b\u0438\u0448\u044c \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c <strong>LESS.js<\/strong>, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430\u044f, \u0438 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430.<\/p>\n<blockquote>\n<p><strong>\u2139\ufe0f Web Compiler 2022+<\/strong><br \/> \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u044f\u0432\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0430\u0439\u043b\u0430 <code>compilerconfig.json<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443:<br \/> <code> [<\/code><br \/> <code>{<\/code><br \/> <code>\"inputFile\": \"css\/main.less\",<\/code><br \/> <code>\"outputFile\": \"css\/main.css\",<\/code><br \/> <code>\"options\":<\/code><br \/> <code>{<\/code><br \/> <code>\"sourceMap\": true,<\/code><br \/> <code>\"relativeUrls\": true<\/code><br \/> <code>}<\/code><br \/> <code>}<\/code><br \/> <code>]<\/code><\/p>\n<\/blockquote>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 (\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e \u042f\u041f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439), \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a TypeScript, LESS \u043d\u0435 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044f\u0437\u044b\u043a. \u041d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u043e\u043d \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 <em>\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438<\/em> CSS.<\/p>\n<p>\u042d\u0442\u0430 \u0436\u0435 \u0447\u0435\u0440\u0442\u0430 (\u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 CSS) \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u043e\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 (\u0442\u0438\u043f\u0430 PHP, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u0442\u043e\u0436\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0434\u0438\u043d \u043a\u043e\u0434 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e). \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, PHP \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u0435, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0421\u0423\u0411\u0414. LESS \u0436\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043e\u043a \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 (\u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0432 \u043d\u0451\u043c \u043c\u0430\u043b\u043e), \u0430 \u0435\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u0435-\u043a\u0430\u043a\u0438\u0435 I\/O-\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438), \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435. \u041a\u0430\u043a \u043f\u043e\u0448\u0443\u0442\u0438\u043b \u0430\u0432\u0442\u043e\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430 \u043f\u043e LESS, \u0445\u043e\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS, \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0437 \u043d\u0435\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, LESS \u043d\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0442\u0435\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0435\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d \u043a CSS. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u043d\u0451\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439:<\/p>\n<pre><code class=\"css\">\/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445: @snow-src: '..\/images\/snow.png'; @tree-blue-color: #a2e2ff; @minus-value: -@value;  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435: .cover { background-image: url(@snow-src); color: @tree-blue-color; --direction: @minus-value; } <\/code><\/pre>\n<p>\u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u00ab\u0441\u043e\u0431\u0430\u043a\u0443\u00bb <code>@<\/code>, \u0430 \u043d\u0435 \u0434\u0432\u043e\u0439\u043d\u043e\u0439 \u043c\u0438\u043d\u0443\u0441 <code>--<\/code> (\u0435\u0449\u0451, \u043a\u0430\u043a \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0434\u043b\u044f <em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/em> \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 <code>var()<\/code>). \u0410 \u043a\u0440\u0430\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f LESS\u00a0\u2014\u00a0\u043c\u0438\u043a\u0441\u0438\u043d\u044b\u00a0\u2014\u00a0\u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u044b \u0432 CSS:<\/p>\n<pre><code class=\"css\">\/\/ \u042f \u043c\u0438\u043a\u0441\u0438\u043d .text() .text(@font-size, @font-weight) { line-height: 1.5; font-size: @font-size; font-weight: @font-weight; }  \/\/ \u042f \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 .debugA when (@debug = true) { background-color: aliceblue; } <\/code><\/pre>\n<h3>\u276f \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (compile-time) \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (runtime) \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438<\/h3>\n<p>\u0412\u044b\u0448\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 LESS. \u041e\u043d\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u0430\u043c\u0438\u043c LESS \u0432 2009 \u0433\u043e\u0434\u0443, \u0437\u0430\u0434\u043e\u043b\u0433\u043e \u0434\u043e CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0441\u0435\u043c\u044c \u043b\u0435\u0442 \u0441\u043f\u0443\u0441\u0442\u044f, \u0432 2017). \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 LESS, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 CSS? \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442 \u043c\u044b\u0441\u043b\u044c \u0434\u0430\u043b\u044c\u0448\u0435: \u043c\u043e\u043b, \u0438 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0432 \u0446\u0435\u043b\u043e\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041d\u0443, \u0438\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 W3C \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0434\u043e\u043f\u0438\u043b\u0438\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b. (\u0410 \u043e\u043d \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0441\u044f: 15 \u043c\u0430\u044f 2025 \u0433\u043e\u0434\u0430 \u043f\u043e \u043d\u0438\u043c \u0431\u044b\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u043b\u0438\u0448\u044c <a href=\"https:\/\/www.w3.org\/TR\/css-mixins-1\/\" rel=\"noopener noreferrer nofollow\">First Public Working Draft<\/a>). \u0414\u043e\u043b\u044f \u043f\u0440\u0430\u0432\u0434\u044b \u0432 \u044d\u0442\u043e\u043c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u0430\u043a \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0431\u044b\u043b\u043e, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f.<\/p>\n<p>\u041d\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0432 CSS. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 LESS \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u044d\u0442\u0438\u0445 \u0432\u0435\u0449\u0435\u0439, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 CSS \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u044f\u043a\u043e\u0431\u044b \u00ab\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435\u00bb \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 <code>:root<\/code>, \u043c\u044b \u0441\u043a\u043b\u043e\u043d\u043d\u044b \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445: \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;html&gt;<\/code>.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u00a0\u2014\u00a0\u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435) \u043f\u043e <em>\u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/em>. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 CSS\u00a0\u2014\u00a0<em>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435<\/em>. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u0442\u0435\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <em>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em> (\u0438\u0437 Javascript&#8217;\u0430) \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0436\u0435 \u0432 LESS\u00a0\u2014\u00a0<em>\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435<\/em> (<em>\u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/em>). \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043e\u043d\u0438 \u0443\u0436\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442, \u0438 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e. \u0413\u043b\u044f\u0434\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0433\u043b\u0430 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439, \u0442\u0430\u043a \u0438 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043d\u043e\u0439, \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0430 \u043d\u0443\u0436\u043d\u0430\u00a0\u2014\u00a0\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <code>@<\/code>), \u0438\u043b\u0438 \u0436\u0435 \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <code>--<\/code>). \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438 \u0432\u0430\u043c \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443.<\/p>\n<blockquote>\n<p><strong>\u2139\ufe0f \u041d\u043e \u0435\u0441\u0442\u044c \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/strong><br \/> \u041f\u0430\u043b\u0438\u0442\u0440\u044b \u044f \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u044e CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0438\u0445 \u043c\u0435\u043d\u044f\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0445 \u0432 <em>DevTools<\/em> \u0432 \u0432\u0438\u0434\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b:<\/p>\n<p><code>:root<\/code><br \/> <code>{<\/code><br \/> <code>--light-blue: #62aeff;<\/code><br \/> <code>--bright-pink: #ff879c;<\/code><br \/> <code>--wet-asphalt: #24303a;<\/code><br \/> <code>\u2026<\/code><br \/> <code>@tree-blue-color: #a2e2ff;<\/code><br \/> <code>\/\/ @tree-blue-color \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435,<\/code><br \/> <code>\/\/ \u0430 \u043a\u0430\u043a seed \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432<\/code><br \/> <code>\/\/ \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 LESS:<\/code><br \/> <code>--tree-blue-text: @tree-blue-color;<\/code><br \/> <code>--tree-blue-background: lighten(@tree-blue-color, 10%);<\/code><br \/> <code>\u2026<\/code><br \/> <code>}<\/code><\/p>\n<\/blockquote>\n<h2>\u0423\u0433\u043b\u0443\u0431\u043b\u044f\u0435\u043c\u0441\u044f \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/h2>\n<h3>\u276f \u041c\u0438\u043a\u0441\u0438\u043d\u044b<\/h3>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0432 LESS, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b\u0448\u0435 \u044f \u043d\u0430\u0437\u0432\u0430\u043b \u043a\u0440\u0430\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c \u043a\u0430\u043c\u043d\u0435\u043c\u00a0\u2014\u00a0<em>\u043c\u0438\u043a\u0441\u0438\u043d\u044b<\/em> (<em>mixins<\/em>, \u043e\u043d\u0438 \u0436\u0435 <em>\u043f\u0440\u0438\u043c\u0435\u0441\u0438<\/em>).<\/p>\n<p>\u041c\u0438\u043a\u0441\u0438\u043d\u044b \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445 \u0441 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u043c (C++, Java) \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445 (\u0421\u0438). \u041d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b \u043e\u043d\u0438 \u043f\u043e\u0445\u043e\u0436\u0438 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439. \u0410 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u043d\u0438 \u043f\u043e\u0445\u043e\u0436\u0438 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u0440\u0442\u0435\u0436\u0435\u0439!).<\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0439. \u0417\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u0442\u0430\u043a\u0441\u043e\u043d\u043e\u043c\u0438\u0438 CSS, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u0445, \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442? \u0410 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432 \u043d\u0435\u0439 <em>\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/em>, \u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u044f \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0436\u0443.<\/p>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f <em>single responsibility<\/em> (\u0431\u0443\u043a\u0432\u0430 <strong>S<\/strong> \u0432 <strong>SOLID<\/strong>, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e) \u043f\u0440\u0435\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u043c\u0438 \u043e\u0434\u043d\u0443 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e. CSS-\u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443, \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 <em>\u0443\u0442\u0438\u043b\u0438\u0442\u0430\u043c\u0438<\/em>:<\/p>\n<pre><code class=\"css\">\u2026 .rounded-0 { border-radius: 0 !important; }  .rounded-1 { border-radius: 0.125rem !important; }  .rounded-2 { border-radius: 0.25rem !important; }  .rounded-3 { border-radius: 0.375rem !important; } \u2026 .p-0 { padding: 0 !important; }  .p-1 { padding: 0.25rem !important; }  .p-2 { padding: 0.5rem !important; }  .p-3 { padding: 1rem !important; } \u2026 <\/code><\/pre>\n<p>\u0421 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0443\u0442\u0438\u043b\u0438\u0442 \u0443 \u043d\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c (\u043e\u0442\u0447\u0430\u0441\u0442\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439).<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430). \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0438\u043c\u0435\u043b\u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u043a\u0440\u0430\u0451\u0432 \u0438 \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f (\u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044f \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u0440\u0438\u0441\u0443\u0449\u0438\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c \u0442\u043e\u0432\u0430\u0440\u043e\u0432). \u0418 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430:<\/p>\n<pre><code>&lt;div class=\"card rounded-2 p-2\"&gt; \u041a\u043e\u043d\u0444\u0435\u0442\u043a\u0438 &lt;\/div&gt; &lt;div class=\"card rounded-2 p-2\"&gt; \u0411\u0430\u0440\u0430\u043d\u043e\u0447\u043a\u0438 &lt;\/div&gt; &lt;div class=\"card rounded-2 p-2\"&gt; \u0421\u0430\u043d\u0438 \u00ab\u041b\u0435\u0431\u0435\u0434\u044c\u00bb &lt;\/div&gt; <\/code><\/pre>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u0435, \u0432\u043e \u0447\u0442\u043e \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434: \u0434\u0435\u0441\u044f\u0442\u043a\u0438 (\u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u0435\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435!) \u043a\u043b\u0430\u0441\u0441\u043e\u0432-\u0443\u0442\u0438\u043b\u0438\u0442 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0442\u0435\u0433\u0435. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 (CSS), \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u043a\u0430\u043a \u0411\u044d\u0442\u043c\u0435\u043d \u0432 \u0441\u0432\u043e\u0439 \u0440\u043e\u0434\u043d\u043e\u0439 \u0413\u043e\u0442\u044d\u043c.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/8n\/js\/0j\/8njs0jdu8jzxixtcx20cbtyaxuu.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/8n\/js\/0j\/8njs0jdu8jzxixtcx20cbtyaxuu.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/8n\/js\/0j\/8njs0jdu8jzxixtcx20cbtyaxuu.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2014 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u0440\u0443\u0434\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u2026 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0449\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438: \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 DRY. \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435. \u0412\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u043a\u0430\u0436\u0435\u0442\u0435, \u0447\u0442\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043f\u0438\u0448\u0435\u0442 \u0442\u0435\u0433\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0440\u0443\u043a\u0430\u043c\u0438. \u041e\u043d\u0438 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (server-side rendering) \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (Javascript), \u0438\u043d\u043e\u0433\u0434\u0430\u00a0\u2014\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u043e \u044d\u0442\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0435\u043c\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f, \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043a\u0440\u0443\u0433\u043b\u044b\u043c\u0438, \u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439\u00a0\u2014\u00a0\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u043c\u0438. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0432 <code>.rounded-2<\/code>, \u0442\u043e \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0435\u043c\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0435\u0434\u043a\u043e\u0441\u0442\u044c\u00a0\u2014\u00a0\u043a\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u044d\u0442\u0438 \u044e\u0437\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043c \u0432\u044b\u0431\u043e\u0440. (\u0410 \u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u0442\u0435\u043c\u0443 \u00ab\u041f\u043e\u0433\u043e\u0434\u0430\u00bb \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u00ab\u042f\u043d\u0434\u0435\u043a\u0441\u0430\u00bb? \u0420\u0430\u0434\u0438 \u043d\u0435\u0451 \u043e\u0434\u043d\u043e\u0439 \u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b yandex.ru \u043f\u043e \u0434\u0435\u0441\u044f\u0442\u044c \u0440\u0430\u0437 \u0432 \u0434\u0435\u043d\u044c). \u041e\u0434\u043d\u0430\u043a\u043e, \u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0430\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 <strong>OpenShell<\/strong> (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0435\u043d\u044f\u0435\u0442 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 <em>Windows\u00a0Explorer<\/em> \u0438 \u043c\u0435\u043d\u044e <em>Start<\/em> \u0432 \u0441\u0442\u0438\u043b\u0435 Windows\u00a07, Windows\u00a010 \u0438\u043b\u0438 Windows\u00a011), \u0438 \u0431\u0435\u0437 \u043e\u0431\u0449\u0435\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 CSS \u044f \u0431\u044b \u0437\u0430\u043c\u0443\u0447\u0438\u043b\u0441\u044f \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u043b\u0430\u0442\u044c. \u041d\u043e \u0438 \u0434\u043b\u044f \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b, \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u00a0\u2014\u00a0\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043f\u043e\u043a\u0430\u0437\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 (\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445! \u043d\u0435 \u043c\u0430\u043a\u0435\u0442\u043e\u0432!) \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u0441\u0442\u0432\u0443, \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u0430\u043c \u0438 \u0444\u043e\u043a\u0443\u0441-\u0433\u0440\u0443\u043f\u043f\u0430\u043c. \u0410 \u0435\u0449\u0451 \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 UX, A\/B-\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0442.\u043f.<\/p>\n<p>\u0422\u0440\u0435\u0442\u044c\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0438\u0437\u0440\u044f\u0434\u043d\u043e \u0437\u0430\u0445\u043b\u0430\u043c\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u0434 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u043d\u0438 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435. \u0421\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432-\u0443\u0442\u0438\u043b\u0438\u0442, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>.p-*<\/code> \u0438 <code>.rounded-*<\/code>, \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c\u2026 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0435\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0438\u0437 \u041e\u041e\u041f-\u044f\u0437\u044b\u043a\u043e\u0432, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u044b \u043e\u0434\u043d\u0438\u043c-\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u043e\u0431\u0449\u0451\u043d\u043d\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c (\u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u043c), \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u044b \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0443\u0436 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u0442\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0448\u0430\u0433\u0430\u00a0\u2014\u00a0\u0445\u043e\u0442\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0447\u0438\u0441\u0442\u043e \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u0443\u0447\u0448\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u043b\u0438\u043d\u0435\u0439\u043d\u043e).<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0443\u0442-\u0442\u043e \u0431\u044b \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041c\u0438\u043a\u0441\u0438\u043d\u044b \u0432 \u0441\u0432\u043e\u0435\u0439 \u043f\u0435\u0440\u0432\u043e\u0439 \u0440\u043e\u043b\u0438 (\u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0439) \u043a\u0430\u043a \u0440\u0430\u0437 \u044d\u0442\u043e \u0438 \u0434\u0435\u043b\u0430\u044e\u0442:<\/p>\n<pre><code class=\"css\">\/\/ \u041c\u0438\u043a\u0441\u0438\u043d\u044b (\u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b) \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u043a\u043e\u0431\u043a\u0430\u043c\u0438 .rounded-2() { border-radius: 0.25rem !important; }  .p-2() { padding: 0.5rem !important; }  \/\/ \u041d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 CSS-\u043a\u043b\u0430\u0441\u0441 .card { \/\/ \u00ab\u041d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u00bb \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 card \u043e\u0442 rounded-2 \u0438 p-2 .rounded-2(); .p-2();  \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a card \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. color: white; } <\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b-\u0443\u0442\u0438\u043b\u0438\u0442\u044b \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 single responsibility, \u043c\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u043c \u043a\u0430\u043a \u043c\u0438\u043a\u0441\u0438\u043d\u044b\u00a0\u2014\u00a0\u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u00ab\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u00bb \u043e\u0442 \u043d\u0438\u0445. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 CSS-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">.card {   border-radius: 0.25rem !important;   padding: 0.5rem !important;   color: white; } <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u0432\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 <em>\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/em>, \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b. \u042d\u0442\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 LESS: \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 IDE \u043c\u0435\u0436\u0434\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u043c \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043f\u0440\u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u043d\u0438\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0430\u0445\u00a0\u2014\u00a0\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u0438 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438 \u0442.\u0434.<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u0434\u0435 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0435\u0434\u043e\u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0442\u0443\u0434\u0430 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 CSS-\u043a\u043b\u0430\u0441\u0441\u044b.<\/p>\n<p>\u0427\u0435\u0433\u043e \u043c\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c? \u0422\u043e\u0433\u043e, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 (\u0442\u0435\u043f\u0435\u0440\u044c <code>&lt;div&gt;<\/code> \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>class=\"card\"<\/code> \u0445\u043e\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0445\u043e\u0442\u044c \u0432 HTML-\u043a\u043e\u0434\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b), \u043d\u043e:<br \/> 1)\u00a0\u043d\u0435 \u0446\u0435\u043d\u043e\u0439 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u044f SOLID,<br \/> 2)\u00a0\u0431\u0435\u0437 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b, \u0438<br \/> 3)\u00a0\u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b-\u0443\u0442\u0438\u043b\u0438\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0441\u043b\u043e\u0432\u0430\u0440\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u0438\u0445 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u0432. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0430\u043a\u043e\u0432\u044b\u0445, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e: \u0438\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u043e\u0433\u043e CSS-\u0444\u0430\u0439\u043b\u0430, \u043f\u0440\u0438\u0441\u043b\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043e\u0442\u0434\u0435\u043b\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (\u00ab\u2026\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f\u2026\u00bb), \u0438\u0437 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u0434\u0430\u0436\u0435 \u0431\u044b\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u043c (\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u043d\u0434\u0435\u0435\u0446 \u0417\u043e\u0440\u043a\u0438\u0439 \u0413\u043b\u0430\u0437, \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c, \u0443\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u043c\u043e\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 LESS-\u043a\u043e\u0434\u0435 \u0432\u0437\u044f\u0442\u044b \u0438\u0437 SASS&#8217;\u043d\u043e\u0433\u043e Bootstrap&#8217;\u0430).<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432 LESS \u0432\u043e\u043e\u0431\u0449\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u043c, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<pre><code class=\"css\">\/\/ \u041a\u043b\u0430\u0441\u0441\u044b-\u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0432\u0437\u044f\u0442\u044b \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u0438\u0437\u0432\u043d\u0435 \u2026 .rounded-2 { border-radius: 0.25rem !important; } \u2026 .p-2 { padding: 0.5rem !important; } \u2026 .card { \/\/ \u041d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435 .rounded-2(); .p-2; \/\/ \u0418 \u0434\u0430\u0436\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b!  color: white; } <\/code><\/pre>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439, \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e CSS \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0432\u044b\u0431\u0440\u043e\u0448\u0435\u043d\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 (\u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b \u0438 \u043d\u0435\u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u043d\u044b):<\/p>\n<pre><code class=\"css\">.rounded-2 {   border-radius: 0.25rem !important; } .p-2 {   padding: 0.5rem !important; } .card {   border-radius: 0.25rem !important;   padding: 0.5rem !important;   color: white; } <\/code><\/pre>\n<h3>\u276f \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u0438 \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u0438\u0437\u0432\u043d\u0435, \u0442\u043e \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u043a \u0440\u0430\u043d\u044c\u0448\u0435. \u0421\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043c\u043e\u0436\u043d\u043e <em>\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/em> \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043e\u043f\u043e\u0440\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435 (\u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435), \u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043b\u044f <code>.p-*<\/code> \u0438 <code>.rounded-*<\/code> \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445 \u0442\u0438\u043f\u0430 \u043d\u0438\u0436\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0433\u043e \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430\u00a0\u2014\u00a0\u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>border-radius<\/code>\/<code>padding<\/code> \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"css\">.rounded(@radius) { border-radius: @radius !important; }  .p(@padding) { padding: @padding !important; } <\/code><\/pre>\n<p>\u0421\u043c\u044b\u0441\u043b \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u0438\u043a\u0441\u0438\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435 \u043e\u0434\u043d\u043e, \u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u00ab\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u043e\u0435\u00bb \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>left<\/code>\/<code>top<\/code> \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0438\u0445 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u0435:<\/p>\n<pre><code class=\"css\">.pos(@l, @t) { left: @l; top: @t;  position: absolute; } <\/code><\/pre>\n<p>\u0410 \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">\/* \u0417\u0430\u043c\u0435\u0442\u043a\u0430, \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d\u043d\u0430\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. *\/ img.note { \/* \u0420\u0430\u0437\u043c\u0435\u0440 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043d\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f (\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0443 \u044e\u0437\u0435\u0440\u0430). *\/ .pos(0, 90px); }  \/* \u0420\u0430\u043c\u043a\u0430, \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430. *\/ .bezel { .pos(0); .size(@control-size); }  \/* \u0411\u043b\u0438\u043a. *\/ \/\/ &amp; \u044d\u0442\u043e \u00ab\u043c\u0435\u0441\u0442\u043e\u0438\u043c\u0435\u043d\u0438\u0435\u00bb, \u0437\u0430\u043c\u0435\u0449\u0430\u044e\u0449\u0435\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0438. &amp;::after { .pos(10%, 5%); .size(100%); .circle();  content: \"\"; opacity: 0.2; transform: skewX(-20deg); background: @glare-radial-gradient; } <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043b\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>position: absolute;<\/code>, \u043e\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u0432\u0430\u0436\u0434\u044b\u00a0\u2014\u00a0\u043d\u0435\u0442, \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0437\u0430 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0434\u0432\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0442\u043e, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0441\u0447\u0451\u0442 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432. \u041a\u0430\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432, \u044d\u0442\u0438 \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u043c\u0430\u043b\u043e\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432 \u043d\u0438\u0445 \u043d\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f\u00a0\u2014\u00a0\u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0438\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u043c \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u0441\u0442\u044c \u043c\u0438\u043a\u0441\u0438\u043d\u0430, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041b\u044e\u0431\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u0440\u0435\u0448\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/p>\n<blockquote>\n<p><strong>\u2139\ufe0f \u041d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443<\/strong><br \/> \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c (<code>left<\/code>\/<code>top<\/code>) \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u043c (<code>inset-inline-start<\/code>\/<code>inset-block-start<\/code>). \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0441\u043c. \u0440\u0430\u0437\u0434\u0435\u043b \u00ab\u042d\u0440\u0430 \u043c\u0443\u043b\u044c\u0442\u0438\u043a\u0443\u043b\u044c\u0442\u0443\u0440\u0430\u043b\u0438\u0437\u043c\u0430\u00bb <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/874486\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>.<\/p>\n<\/blockquote>\n<p>\u041b\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u0445 \u0438 \u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u0445\u00a0\u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 DSL, \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043a\u0432\u0430\u0437\u0438-\u044f\u0437\u044b\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c UI \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u0445 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u043e\u0431\u043d\u044b \u043c\u043d\u0435: <code>.pos()<\/code>, <code>.size()<\/code>, <code>.circle()<\/code> \u0438 \u0442.\u0434. \u041d\u0435 \u0442\u043e, \u0447\u0442\u043e \u0431\u044b \u044f \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u043b \u044f\u0437\u044b\u043a\u0438, \u043d\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 CSS (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u0437-\u0437\u0430 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0433\u0435\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043d\u0430\u043f\u043b\u0430\u0441\u0442\u043e\u0432\u0430\u043d\u0438\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432, \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430 \u0434\u043e\u043b\u0433\u0438\u0435 \u0433\u043e\u0434\u044b) \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0436 \u0434\u0430\u043b\u0451\u043a \u043e\u0442 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438. \u0414\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e\u043c \u0447\u0435\u043c\u0443 \u0441\u043b\u0443\u0436\u0430\u0442 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 <a href=\"https:\/\/dev.to\/seracoder\/flexbox-cheatsheet-for-beginners-3n15\" rel=\"noopener noreferrer nofollow\">\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0438<\/a> \u043f\u043e \u0444\u043b\u0435\u043a\u0441\u0431\u043e\u043a\u0441\u0430\u043c\/\u0433\u0440\u0438\u0434\u0430\u043c \u0438 \u043f\u0440\u043e\u0447\u0435\u043c\u0443. \u0417\u0430 \u0441\u0432\u043e\u044e \u0436\u0438\u0437\u043d\u044c \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u043e\u0442\u043d\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u0430\u0437\u0431\u0443\u0434\u0438\u0442\u0435 \u043c\u0435\u043d\u044f \u043d\u043e\u0447\u044c\u044e \u0438 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 <code>align-items<\/code> \u0438 <code>justify-content<\/code>, \u0438 \u044f \u0431\u0435\u0437 \u0437\u0430\u043f\u0438\u043d\u043a\u0438 \u043e\u0442\u0432\u0435\u0447\u0443: \u00ab\u0421\u043b\u0443\u0448\u0430\u0439, \u0434\u0430\u0439 \u043f\u043e\u0441\u043f\u0430\u0442\u044c, \u0430!\u00bb. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0432\u044c\u044e (\u043d\u0438 \u043c\u0435\u043d\u044f, \u043d\u0438 \u0434\u0440\u0443\u0433\u0438\u0445). \u0421\u0435\u0440\u044c\u0451\u0437\u043d\u043e, \u043d\u0435 \u0437\u043d\u0430\u044e, \u043a\u0442\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u043b \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043d\u043e \u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u043e\u0441\u043f\u0435\u0448\u0438\u043b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0445 \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0430 \u043c\u0435\u0441\u044f\u0446 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u044e\u0441\u044c \u0432 \u043c\u0438\u0440 Rust. \u0418, \u0434\u0443\u043c\u0430\u044e, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u044d\u0442\u0438\u043c \u043d\u0435 \u0443 \u043c\u0435\u043d\u044f \u043e\u0434\u043d\u043e\u0433\u043e\u00a0\u2014\u00a0\u043d\u0435\u0434\u0430\u0440\u043e\u043c \u0436\u0435 \u0432 <strong>DevTools<\/strong> \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 flex- \u0438 grid-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432.<\/p>\n<p>\u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e, \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432: \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 CSS&#8217;\u043d\u044b\u0435 <code>\/*\u00a0comment\u00a0*\/<\/code> \u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 LESS <code>\/\/\u00a0comment<\/code>. \u0412\u0441\u0451 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0445\u043e\u0447\u0443 \u043b\u0438 \u044f, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043f\u043e\u043f\u0430\u043b \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 CSS, \u0438\u043b\u0438 \u0431\u044b\u043b \u0443\u0434\u0430\u043b\u0451\u043d \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a LESS-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0432\u0435\u0449\u0430\u043c, \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u043c\u044b\u0441\u043b\u0430 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442.<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u0432\u0430 \u043e\u0434\u043d\u043e\u0438\u043c\u0451\u043d\u043d\u044b\u0445 (<code>.pos(@l, @t)<\/code> \u0438 <code>.pos(@offset)<\/code>) \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (\u0434\u0432\u0443\u043c\u044f \u0438 \u043e\u0434\u043d\u0438\u043c). \u0414\u0430, \u0442\u0430\u043a\u0438\u0435 \u00ab\u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0438\u00bb \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043c\u0438\u043a\u0441\u0438\u043d \u0447\u0435\u0440\u0435\u0437 \u0434\u0440\u0443\u0433\u043e\u0439:<\/p>\n<pre><code class=\"css\">.pos(@l, @t) { left: @l; top: @t;  position: absolute; }  .pos(@offset) { .pos(@offset, @offset); } <\/code><\/pre>\n<p>\u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u044f \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043b, \u00ab\u043c\u0435\u0441\u0442\u043e\u0438\u043c\u0435\u043d\u0438\u0435\u00bb <code>&amp;<\/code>\u00a0\u2014\u00a0\u044d\u0442\u043e\u0442 \u0441\u0438\u043c\u0432\u043e\u043b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 (\u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u0430\u0451\u0442 \u043d\u0430\u043c LESS). \u041f\u0440\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0438 \u0435\u0451 \u0440\u043e\u043b\u044c \u0432 \u0447\u0438\u0441\u0442\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043a \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0430 \u043f\u043e\u043a\u0430 \u043e\u0446\u0435\u043d\u0438\u0442\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441 \u043d\u0435\u044e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"css\">.web-cam-control { \u2026\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u044b\u00a0\u2026  \/* \u0411\u043b\u0438\u043a. *\/ &amp;::after { \u2026\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 .web-cam-control::after\u00a0\u2026 } } <\/code><\/pre>\n<h3>\u276f \u041b\u0438\u0441\u0442\u0430\u044f \u0441\u0442\u0430\u0440\u0443\u044e \u0442\u0435\u0442\u0440\u0430\u0434\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u0436\u0438\u0432\u043e\u0433\u043e \u0410\u043b\u0430\u043d \u041a\u0435\u044f<\/h3>\n<p>\u041e\u0434\u043d\u0430\u0436\u0434\u044b \u043c\u043d\u0435 \u043d\u0430 \u0433\u043b\u0430\u0437\u0430 \u043f\u043e\u043f\u0430\u043b\u0430\u0441\u044c \u043c\u0435\u043c\u0443\u0430\u0440\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u00ab<a href=\"https:\/\/habr.com\/ru\/articles\/507996\/\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f SmallTalk<\/a>\u00bb \u0437\u0430 \u0430\u0432\u0442\u043e\u0440\u0441\u0442\u0432\u043e\u043c \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f \u0410\u043b\u0430\u043d\u0430 \u041a\u0435\u044f (\u0435\u0441\u043b\u0438 \u0447\u0442\u043e, \u044d\u0442\u043e \u0442\u043e\u0442 \u0447\u0443\u0432\u0430\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u041e\u041e\u041f). \u042f \u043d\u0435 \u0436\u0434\u0430\u043b \u043d\u0430\u0439\u0442\u0438 \u0442\u0430\u043c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u0442\u043a\u0440\u043e\u0432\u0435\u043d\u0438\u044f (\u043f\u0440\u043e\u0441\u0442\u043e \u043b\u044e\u0431\u043b\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0434\u0440\u0435\u0432\u043d\u0438\u0445 \u0432\u0435\u043a\u043e\u0432), \u043e\u0434\u043d\u0430\u043a\u043e \u0436\u0435 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u0451\u043b \u043d\u0430 \u043c\u0435\u043d\u044f \u0433\u043b\u0443\u0431\u043e\u0447\u0430\u0439\u0448\u0435\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435. \u0412\u043e\u0442 \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e \u0441\u0432\u043e\u0451\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u0438\u0438 \u041e\u041e\u041f:<\/p>\n<blockquote>\n<p><em>\u0417\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043d\u0435\u0439 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 B5000 \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u043e\u0440 \u0432 \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0435 \u042e\u0442\u044b \u0411\u043e\u0431 \u0411\u0430\u0440\u0442\u043e\u043d \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0439 \u0441\u043a\u0430\u0437\u0430\u043b \u0442\u0430\u043a: \u00ab\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0432\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438\u00bb. \u0422\u043e\u0433\u0434\u0430 \u044f \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0438\u043b \u044d\u0442\u0443 \u0438\u0434\u0435\u044e \u043a \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443 \u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0437\u0440\u044f \u0435\u0433\u043e \u0434\u0435\u043b\u044f\u0442 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u0430\u0431\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u044b. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b, \u043a\u0430\u043a \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438? \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u044c, \u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0442\u044b\u0441\u044f\u0447\u0438, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0438\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u0431\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443.<\/em><\/p>\n<\/blockquote>\n<p>\u0418 \u044d\u0442\u043e \u043d\u0430\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u043e \u043c\u0435\u043d\u044f \u043d\u0430 \u043c\u044b\u0441\u043b\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043a\u0440\u0443\u0442\u044b\u0435 \u0448\u0442\u0443\u043a\u0438: \u043d\u0430\u0434\u043e \u0434\u0430\u0442\u044c \u0440\u0430\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c, \u0447\u0442\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u0434\u0438\u0441\u043a\u0440\u0438\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c, \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0442.\u043d. \u00ab\u0433\u0440\u0430\u0436\u0434\u0430\u043d\u0438\u043d\u043e\u043c \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u00bb.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u044f\u0437\u044b\u043a C, \u043d\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b \u043f\u0440\u043e \u041e\u041e\u041f. \u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043d\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0440\u0430\u0432\u043d\u044f\u0435\u043c \u0438\u0445! \u0418 \u0432\u043e\u0442 \u0432\u0430\u043c C++.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u044f\u0437\u044b\u043a C, \u043d\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b \u043f\u0440\u043e \u0424\u041f (\u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0424\u041f \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A7%D1%91%D1%80%D1%87,_%D0%90%D0%BB%D0%BE%D0%BD%D0%B7%D0%BE\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u043d\u044c\u0448\u0435<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440). \u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u0430\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0447\u0438\u0441\u043b\u043e, \u0441\u0442\u0440\u043e\u043a\u0443, \u043d\u043e \u043d\u0435 in-place \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438? \u0418 \u0432\u043e\u0442 \u0432\u0430\u043c \u043b\u044f\u043c\u0431\u0434\u044b.<\/p>\n<p>\u0421 \u0442\u0435\u0445 \u043f\u043e\u0440, \u043a\u0430\u043a \u044f \u044d\u0442\u043e \u043e\u0441\u043e\u0437\u043d\u0430\u043b, \u044f \u0432\u0438\u0436\u0443 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u0441\u044e\u0434\u0443.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/lj\/qy\/2o\/ljqy2oqfcyszmpu6vavf3cf9ere.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/lj\/qy\/2o\/ljqy2oqfcyszmpu6vavf3cf9ere.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/lj\/qy\/2o\/ljqy2oqfcyszmpu6vavf3cf9ere.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u276f \u0420\u0443\u043b\u0441\u0435\u0442\u044b (rulesets)<\/h3>\n<p>\u0427\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0433\u043e, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u044d\u0442\u0438\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u043c, \u044d\u043c\u0430\u043d\u0441\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0432 LESS?<\/p>\n<p>\u0412 \u043d\u0451\u043c \u0433\u0440\u0430\u0436\u0434\u0430\u043d\u0430\u043c\u0438 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 <em>\u0440\u0443\u043b\u0441\u0435\u0442\u044b<\/em> (<em>rulesets<\/em>), \u0438 \u044d\u0442\u043e \u0434\u0430\u043b\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c \u043d\u043e\u0432\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 <em>\u0440\u0443\u043b\u0441\u0435\u0442\u044b<\/em>? \u0410 \u044d\u0442\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \u0442\u0435\u043b\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0412 CSS \u043c\u044b \u043e \u043d\u0438\u0445 \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0434\u0443\u043c\u0430\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0430\u043c \u043e\u043d\u0438 \u043d\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u0432 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0435\u0434\u0438\u043d\u0438\u0446\u0443. \u0418 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u0438 \u0440\u0443\u043b\u0441\u0435\u0442\u00a0\u2014\u00a0\u0432 CSS \u0432\u0441\u0451 \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u0430: \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<pre><code class=\"css\">div.error \/* \u2190 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 *\/ { \/* \u2190 \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0443\u043b\u0441\u0435\u0442\u0430 *\/ color: white; background-color: red; } \/* \u2190 \u043a\u043e\u043d\u0435\u0446 \u0440\u0443\u043b\u0441\u0435\u0442\u0430 *\/ <\/code><\/pre>\n<p>\u0410 \u0432\u043e\u0442 \u0432 LESS \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0440\u0434\u044b\u043c\u0438 \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c\u0438 \u0440\u0443\u043b\u0441\u0435\u0442\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u0445 \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0427\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0438\u0445 \u0441 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b.<\/p>\n<h2>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435<\/h2>\n<h3>\u276f \u042f \u043d\u0435 \u043f\u0440\u043e\u0449\u0443 \u0442\u0435\u0431\u044f, \u0434\u043e\u0440\u043e\u0433\u043e\u0439<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b, \u0445\u0443\u0434\u043e-\u0431\u0435\u0434\u043d\u043e, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u044b, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043c\u0438\u043a\u0441\u0438\u043d, \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 (\u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0435\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c: \u00ab\u043e\u0431\u043e\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432\u00bb?).<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0438\u043a\u0441\u0438\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443, \u043a\u0430\u043a <em>\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/em>.<\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u0435, \u0447\u0442\u043e \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 (<code>input[type=\"range\"]<\/code>) \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/cf\/fq\/l0\/cffql0gy41plkwf97de09lsvoea.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/cf\/fq\/l0\/cffql0gy41plkwf97de09lsvoea.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/cf\/fq\/l0\/cffql0gy41plkwf97de09lsvoea.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432\u00a0\u2014\u00a0\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u0432, \u0442.\u0435. \u0438\u0437 <code>&lt;div&gt;<\/code>&#8216;\u043e\u0432. \u0418\u043d\u043e\u0433\u0434\u0430, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e (\u0435\u0441\u043b\u0438 \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0442\u043e\u043d\u043a\u0438\u043c\u0438 \u043d\u044e\u0430\u043d\u0441\u0430\u043c\u0438). \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f. \u041f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e\u0431 <em>accessibility<\/em>. \u0412\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0432\u0430\u0448\u0438\u043c \u0441\u043b\u0435\u043f\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u0438 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u0432\u0432\u043e\u0434 \u043d\u0435 \u0445\u0443\u0436\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e? \u0410 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043c\u044b\u0448\u044c\u044e? \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u0441\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u044d\u0442\u0443 \u0433\u043e\u043b\u043e\u0432\u043d\u0443\u044e \u0431\u043e\u043b\u044c (\u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0438\u0434\u043e\u0432 \u0431\u043e\u043b\u0438).<\/p>\n<p>\u0421\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0430\u0434\u0440\u0435\u0441\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430. \u0412 Chrome \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick::-webkit-slider-thumb { background-image: url(..\/images\/joystick\/thumb.png); } <\/code><\/pre>\n<p>\u0410 \u0432 Firefox\u00a0\u2014\u00a0\u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick::-moz-range-thumb { background-image: url(..\/images\/joystick\/thumb.png); } <\/code><\/pre>\n<p>\u0427\u0442\u043e \u0436, \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u0432\u044b. \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0443\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b:<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick::-webkit-slider-thumb, input[type=\"range\"].joystick::-moz-range-thumb { background-image: url(..\/images\/joystick\/thumb.png); } <\/code><\/pre>\n<p>\u0418\u2026 \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043e\u0431\u043e\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 (\u043d\u0443, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043e\u043d\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 \u0440\u0430\u0432\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445!). \u0410 \u0432\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 (\u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e)\u00a0\u2014\u00a0\u043a\u0430\u043a \u0437\u043b\u043e\u0439 \u0430\u043d\u043e\u043d\u0438\u043c\u0443\u0441: \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0449\u0430\u0435\u0442. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0430 \u0438\u0437 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u0430\u044f, \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0432\u0435\u0441\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u0410 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430 \u0447\u0430\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u0432\u044b. \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>:is()<\/code>! \u041e\u043d, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:is#forgiving_selector_parsing\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/a>, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u043c.<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick:is(::-webkit-slider-thumb, ::-moz-range-thumb) { background-image: url(..\/images\/joystick\/thumb.png); } <\/code><\/pre>\n<p>\u0418\u2026 \u0432\u0441\u0451 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:is#is_does_not_select_pseudo-elements\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0432\u0441\u0451 \u0442\u043e\u0439 \u0436\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/a> <code>:is()<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. (\u0410 <code>::-webkit-slider-thumb<\/code> \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u0422\u0430\u043a\u043e\u0432 \u0441\u043f\u043e\u0441\u043e\u0431 \u0430\u0434\u0440\u0435\u0441\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432: \u043a\u0430\u043a \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432).<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0443\u0442 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0438 \u043f\u0440\u0438\u0434\u0451\u0442 <em>\u043c\u0438\u043a\u0441\u0438\u043d \u0441 \u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/em> <code>.any()<\/code>:<\/p>\n<pre><code class=\"css\">\/\/ Provides *forgiving selector parsing*. \/\/ Wrapping with quotes is mandatory for pseudo-elements and optional for regular selectors. .any(@selector-list, @ruleset) { each(@selector-list, { @selector: e(@value);  @{selector} { @ruleset(); } }); } <\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0441\u0435 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u043d\u0435\u0435.<\/p>\n<p>\u042d\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 (<code>@selector-list<\/code>) \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u0440\u0443\u043b\u0441\u0435\u0442, \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0438 \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 (<code>@ruleset<\/code>). \u041e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u0443\u043b\u0441\u0435\u0442 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0438\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c\u0438, \u043d\u043e \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0443 \u043d\u0430\u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. (\u0422\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0439\u0442\u0435 \u0432\u0441\u0435, <s>\u0413\u043e\u0441\u043f\u043e\u0434\u044c<\/s> \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0437\u043d\u0430\u0435\u0442 \u0441\u0432\u043e\u0438\u0445!)<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u0438\u043a\u0441\u0438\u043d \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>each(\u0441\u043f\u0438\u0441\u043e\u043a, \u0442\u0435\u043b\u043e_\u0446\u0438\u043a\u043b\u0430)<\/code> \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>@value<\/code>, \u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 (string escaping) \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>e()<\/code>, \u043f\u043e\u043c\u0435\u0449\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438) <code>@selector<\/code>. \u0417\u0430\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0432 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u043c\u0438 \u043d\u0443\u0436\u043d\u0430 \u043d\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&amp;::-webkit-slider-thumb<\/code>)\u00a0\u2014\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043d\u043e \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u0435\u0442: \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>e()<\/code> \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0435\u0440\u043d\u0451\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<p><code>@{selector}<\/code>\u00a0\u2014\u00a0\u044d\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0430\u044f \u043d\u0430\u043c \u043f\u043e Javascript&#8217;\u0443 <em>\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044f<\/em> \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>@selector<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c, \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0432 \u043c\u0435\u0441\u0442\u0435, \u0433\u0434\u0435 \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0442\u043e\u044f\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u0430 \u0437\u0430 \u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0431\u043b\u043e\u043a <code>{\u00a0\u2026\u00a0}<\/code>, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041d\u0443 \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u044b \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u0443\u043b\u0441\u0435\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043a\u043e\u0431\u043e\u043a: <code>{\u00a0@ruleset();\u00a0}<\/code>.<\/p>\n<p>\u041a\u0430\u043a \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c?<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick { \u2026\u00a0\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430\u00a0\u2026  \/\/ \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430: .any(@range-thumb, { background-image: url(..\/images\/joystick\/thumb.png); }); } <\/code><\/pre>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 <code>:is()<\/code>\u2026 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0441\u0443\u043c\u0435\u043b \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c: \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0440\u0443\u043b\u0441\u0435\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0443\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 CSS-\u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>@range-thumb<\/code> (\u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0438 \u0442\u0440\u0435\u043a, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f):<\/p>\n<pre><code class=\"css\">\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::-webkit-slider-runnable-track \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::-moz-range-track @range-track: '&amp;::-webkit-slider-runnable-track', '&amp;::-moz-range-track';  \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::-webkit-slider-thumb \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::-moz-range-thumb @range-thumb: '&amp;::-webkit-slider-thumb', '&amp;::-moz-range-thumb'; <\/code><\/pre>\n<p>\u041d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0437\u043e\u043d\u0430 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432. \u0418, \u043a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0437\u044f\u0442\u044b \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0435 \u043f\u0443\u0433\u0430\u043b\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 <code>&amp;::-webkit-slider-thumb<\/code> \u0438 \u043d\u0435 \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0435\u0451 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d\u044b (\u043f\u043e\u0442\u043e\u043c\u0443-\u0442\u043e \u043c\u044b \u0438\u0445 \u043f\u043e\u0442\u043e\u043c \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>e()<\/code>). \u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c <code>&amp;<\/code> \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443? \u041f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0430\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 (\u0445\u043e\u0442\u044f \u0431\u044b, \u0437\u0430\u0434\u0430\u0451\u043c \u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435) \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 (\u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0438 \u0442\u0440\u0435\u043a\u0430). \u0410 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 <code>input[type=\"range\"].joystick<\/code>, \u0447\u0442\u043e \u043c\u044b \u0438 \u0432\u0438\u0434\u0438\u043c \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0442\u0440\u0438\u0445. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u043e\u0434\u043d\u0443\u044e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0414\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u043c:<\/p>\n<pre><code class=\"css\">.reset-control() { \/\/ \u0423\u0431\u0440\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435. appearance: none;  \/\/ \u0423\u0431\u0440\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \/\/ \u043a\u0430\u043a \u0443\u0431\u0440\u0430\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435. background-color: transparent; } <\/code><\/pre>\n<p>\u0418 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick { .reset-control();  .any(@range-thumb, { .reset-control();  background-image: url(..\/images\/joystick\/thumb.png); }); } <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u0438\u043a\u0441\u0438\u043d \u0441\u0431\u0440\u043e\u0441\u0430 <code>.reset-control()<\/code> \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0432\u0430\u0436\u0434\u044b: \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043a \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0443. \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u0432\u043e\u0442 \u0432 \u0442\u0430\u043a\u043e\u0439 CSS:<\/p>\n<pre><code class=\"css\">input[type=\"range\"].joystick {   appearance: none;   background-color: transparent; } input[type=\"range\"].joystick::-webkit-slider-thumb {   appearance: none;   background-color: transparent;   background-image: url(..\/images\/joystick\/thumb.png); } input[type=\"range\"].joystick::-moz-range-thumb {   appearance: none;   background-color: transparent;   background-image: url(..\/images\/joystick\/thumb.png); } <\/code><\/pre>\n<p>\u041d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wt\/li\/rj\/wtlirjnpk5zytfrw954vzohysc0.gif\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/webt\/wt\/li\/rj\/wtlirjnpk5zytfrw954vzohysc0.gif 780w,&#10;       https:\/\/habrastorage.org\/webt\/wt\/li\/rj\/wtlirjnpk5zytfrw954vzohysc0.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>(\u041a\u043e\u0434 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0438 \u043a\u043e\u0434 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b).<\/p>\n<h3>\u276f \u041a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/h3>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>@range-track<\/code> \u0438 <code>@range-thumb<\/code> \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438 \u043d\u0430\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0441\u043f\u0438\u0441\u043a\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u0427\u0442\u043e \u0435\u0449\u0451 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b. \u041d\u0443, \u0438\u043b\u0438, \u0445\u043e\u0442\u044f \u0431\u044b, \u0430\u0440\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u044b, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0435 \u043d\u0430\u0442\u0443\u0440\u0430\u043b\u044c\u043d\u044b\u043c.<\/p>\n<p>\u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/2296\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0442 \u0442\u0438\u043a\u0435\u0442<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u043e CSS (<em>CSSWG<\/em>) \u043e\u0442\u043a\u0440\u044b\u043b \u043d\u0435\u043a\u0442\u043e Keith Grant. \u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0435\u043d\u044c\u043a\u043e, \u043d\u0435 \u043f\u0440\u0430\u0432\u0434\u0430 \u043b\u0438? \u041b\u044e\u0431\u043e\u0439 Keith Grant \u0432 \u043d\u0430\u0448\u0438 \u0434\u043d\u0438 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u043e \u044d\u0442\u0430\u043a \u0432\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u0439\u0442\u0438 \u043a CSSWG \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0437\u0430\u043f\u0438\u043b\u0438\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u0418 \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u043d\u0430\u0441, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u0443\u0447\u0451\u0442\u043a\u0443 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u0430\u0439\u043a (\u0432 \u0441\u0443\u043c\u043c\u0435, \u0438\u0445 \u0442\u0430\u043c \u0448\u0442\u0443\u043a 40). \u041d\u0443 \u0430 CSSWG, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u043e \u044d\u0442\u043e\u0442 \u0442\u0438\u043a\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0418\u0431\u043e \u0437\u043d\u0430\u0439\u0442\u0435: \u0432 \u0444\u0435\u0432\u0440\u0430\u043b\u0435 2025-\u043e\u0433\u043e \u0442\u0438\u043a\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0437\u0434\u043d\u043e\u0432\u0430\u043b \u0441\u0432\u043e\u0439 \u0441\u0435\u0434\u044c\u043c\u043e\u0439 \u0434\u0435\u043d\u044c \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f (\u0441\u043e\u0432\u0441\u0435\u043c \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0439, \u043e\u0434\u043d\u0430\u043a\u043e).<\/p>\n<p>\u0427\u0435\u0433\u043e \u0436\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0445\u043e\u0442\u0435\u043b \u0432\u043d\u0435\u0441\u0442\u0438 \u0432 CSS \u041a\u0438\u0442 \u0413\u0440\u0430\u043d\u0442? \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0443\u043c\u043d\u0443\u044e, \u0441 \u043c\u043e\u0435\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, \u0448\u0442\u0443\u043a\u0443. \u0418\u043d\u043e\u0433\u0434\u0430 \u0431\u044b\u0432\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 (\u043a\u0430\u043a \u043e\u043d \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043b, \u201ctext-ish\u201d) \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0443 \u043d\u0438\u0445 \u0440\u0430\u043c\u043e\u0447\u043a\u0443:<\/p>\n<pre><code class=\"css\">.my-form *:text-input { border: 2px solid blue; } <\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u041a\u0438\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>:text-input<\/code>. (\u0418 \u0435\u0449\u0451 \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432: <code>:button<\/code> \u0438 <code>:toggle<\/code>). \u0417\u0430\u0431\u0430\u0432\u043d\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430 \u043e\u043d \u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439 proposal, \u0442\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0435\u0433\u043e \u0434\u0432\u0430\u0436\u0434\u044b\u00a0\u2014\u00a0\u0432\u043e\u0442 \u043a\u0430\u043a \u043b\u0435\u0433\u043a\u043e \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0443\u0447\u043d\u043e\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 \u0441\u043b\u0443\u0447\u0430\u0435\u0432!<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0435\u043c\u044c \u043b\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0432\u043e\u0434\u044f\u0442 \u043d\u0430 \u043c\u044b\u0441\u043b\u044c, \u0447\u0442\u043e \u0436\u0438\u0442\u044c \u0432 \u0442\u0443 \u043f\u043e\u0440\u0443 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u0443\u044e, \u043a\u043e\u0433\u0434\u0430 CSSWG \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b, \u0443\u0436 \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043d\u0438 \u043c\u043d\u0435, \u043d\u0438 \u041a\u0438\u0442\u0443, \u043c\u044b \u043c\u043e\u0436\u0435\u043c, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u043c\u0438\u043b\u043e\u0441\u0442\u0435\u0439 \u043e\u0442 \u043f\u0440\u0438\u0440\u043e\u0434\u044b, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e:<\/p>\n<pre><code class=\"css\">\/\/ https:\/\/github.com\/w3c\/csswg-drafts\/issues\/2296 @text-input: :is( input[type=\"text\"], input[type=\"search\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"email\"], input[type=\"password\"], input[type=\"date\"], input[type=\"month\"], input[type=\"week\"], input[type=\"time\"], input[type=\"number\"], input[type=\"color\"], textarea ); <\/code><\/pre>\n<p>\u0412 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 (\u043f\u043e\u043a\u0430?) \u043d\u0435\u0442 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u043c <code>.any()<\/code> \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0442. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 <code>:is()<\/code>. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u043b\u044f \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438:<\/p>\n<pre><code class=\"css\">.my-form .blue-text@{text-input} { border: 2px solid blue; } <\/code><\/pre>\n<p>\u0418 \u0432\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 (\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a\u043b\u0430\u0441\u0441 <code>blue-text<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430):<\/p>\n<pre><code class=\"css\">.my-form .blue-text:is( input[type=\"text\"], input[type=\"search\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"email\"], input[type=\"password\"], input[type=\"date\"], input[type=\"month\"], input[type=\"week\"], input[type=\"time\"], input[type=\"number\"], input[type=\"color\"], textarea ) {   border: 2px solid blue; } <\/code><\/pre>\n<p>\u0410 \u0432\u043e\u0442 (\u0441\u043b\u0435\u0433\u043a\u0430 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439) \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"css\">\/* Focused tabbable elements. *\/ :not(@{text-input}):not(.custom-focus-frame):focus-visible { .focus-frame(); } <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0442\u043e \u0437\u0430\u0431\u044b\u043b, <code>:focus-visible<\/code>\u00a0\u2014\u00a0\u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 (\u043a\u043d\u043e\u043f\u043e\u043a <strong>Tab<\/strong> \u0438 <strong>Shift<\/strong>\u00a0+\u00a0<strong>Tab<\/strong>) \u0438 \u0433\u043e\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b (\u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u043c, <strong>Enter<\/strong>&#8216;\u043e\u043c). \u0415\u0441\u043b\u0438 \u0431\u044b Windows \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 HTML, \u0442\u043e \u0432\u043e\u0442 \u043a\u0430\u043a \u0431\u044b \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kq\/u7\/cl\/kqu7cl7l-mzmpowgf1ti-tfptzo.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/kq\/u7\/cl\/kqu7cl7l-mzmpowgf1ti-tfptzo.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/kq\/u7\/cl\/kqu7cl7l-mzmpowgf1ti-tfptzo.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b \u043a\u043e\u043d\u0442\u0440\u043e\u043b (\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e: \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>tabindex=\"0\"<\/code>), \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0444\u043e\u043a\u0443\u0441\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u0430-\u043b\u044f Windows (\u0434\u0438\u0437\u0430\u0439\u043d, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0430\u043b\u0435\u043a\u043e \u0443\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u0440\u043d\u0435\u0439). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0443\u044e, \u043a\u0430\u043a \u0432 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dk\/zm\/6r\/dkzm6ryon73amkic8r-ge1oqdt8.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/dk\/zm\/6r\/dkzm6ryon73amkic8r-ge1oqdt8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/dk\/zm\/6r\/dkzm6ryon73amkic8r-ge1oqdt8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0417\u0430 \u043d\u0435\u0451 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043c\u0438\u043a\u0441\u0438\u043d <code>.focus-frame();<\/code> (\u043e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0430 \u0431\u0430\u0437\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>outline<\/code>). \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0445 (\u201ctext-ish\u201d) \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0436\u0435\u0440\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435\u043c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0445 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0446\u0432\u0435\u0442\u0430 \u0440\u0430\u043c\u043a\u0438:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/2f\/7s\/nr\/2f7snr6rni4fjcs4vccryx2tg8c.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/2f\/7s\/nr\/2f7snr6rni4fjcs4vccryx2tg8c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/2f\/7s\/nr\/2f7snr6rni4fjcs4vccryx2tg8c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u043e\u0442 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>:not(@{text-input})<\/code>.<\/p>\n<h3>\u276f \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0435\u043c\u044c\u044e? (\u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0442\u0435\u043b\u0435\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0438\u0446\u0430 \u0438\u0437 \u041f\u0441\u043a\u043e\u0432\u0430)<\/h3>\n<p>\u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0442\u0435\u043f\u0435\u0440\u044c \u043a \u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u0433\u0434\u0435 \u044f \u0436\u0430\u043b\u043e\u0432\u0430\u043b\u0441\u044f, \u0447\u0442\u043e \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u0443\u0442\u0438\u043b\u0438\u0442 \u0437\u0430\u0445\u043b\u0430\u043c\u043b\u044f\u044e\u0442 \u043a\u043e\u0434 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u043b \u0438\u0445 \u00ab\u043f\u0440\u043e\u0441\u0442\u044b\u043d\u044f\u043c\u0438\u00bb. \u042f \u043e\u0431\u0435\u0449\u0430\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438) \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u0418 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u0432\u0441\u0451 \u0442\u0443 \u0436\u0435 \u0444\u043e\u043a\u0443\u0441\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443.<\/p>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430, \u0444\u043e\u043a\u0443\u0441\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u0441\u0442\u043e\u044f\u0442\u044c \u043e\u0442 \u043d\u0435\u0433\u043e \u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0447\u0435\u043c \u043a\u0440\u0443\u043f\u043d\u0435\u0435 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b, \u0442\u0435\u043c \u043e\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u043e, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u0432\u0441\u0451 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0435\u0433\u043e \u0442\u0438\u043f\u0430). \u0410 \u0435\u0449\u0451, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0444\u043e\u043a\u0443\u0441\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u0430\u0440\u0443\u0436\u0438 (\u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u044b\u0448\u0435), \u0442\u043e \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u044b\u0445\u00a0\u2014\u00a0\u0432\u043d\u0443\u0442\u0440\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/rw\/9o\/o2\/rw9oo2-a8k5mi62d860briiigai.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/rw\/9o\/o2\/rw9oo2-a8k5mi62d860briiigai.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/rw\/9o\/o2\/rw9oo2-a8k5mi62d860briiigai.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e \u0446\u044b\u0433\u0430\u043d\u0449\u0438\u043d\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0440\u0430\u043c\u043e\u043a \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043a\u0430\u043a \u0431\u043e\u0433 \u043d\u0430 \u0434\u0443\u0448\u0443 \u043f\u043e\u043b\u043e\u0436\u0438\u0442, \u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u0438\u0437 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. \u0418, \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u044d\u0442\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438: \u0440\u0430\u043c\u043a\u0438 \u043d\u0430\u0440\u0443\u0436\u0443 \u0438 \u0440\u0430\u043c\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u044c.<\/p>\n<p>(\u0415\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u0444\u043e\u043a\u0443\u0441\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u0438 \u0435\u0451 \u0442\u0438\u043f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0441\u043f\u0438\u0441\u043a\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0430 \u043d\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043d\u044b\u0445).<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 (<em>map<\/em>) \u00ab\u0441\u0443\u0444\u0444\u0438\u043a\u0441\u00a0\u2014\u00a0\u043e\u0442\u0441\u0442\u0443\u043f (\u043f\u043e \u043c\u043e\u0434\u0443\u043b\u044e)\u00bb:<\/p>\n<pre><code class=\"css\">@frame-offset-map: { min: 1px; \/\/ Minimal possible offset. xxs: rp(3); xs: rp(4); sm: rp(5); md: rp(10); lg: rp(15); }; <\/code><\/pre>\n<p>\u0421 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432\u0438\u0434\u0430 \u00ab\u0438\u043c\u044f\u00a0\u2014\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00bb \u044d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u0440\u0443\u043b\u0441\u0435\u0442. \u0410 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0443\u043b\u0441\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u0430\u00a0\u2014\u00a0\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>each()<\/code>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441 \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0432\u0441\u0451 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e (\u00ab\u043e\u0442 \u043c\u0430\u043b\u0430 \u0434\u043e \u0432\u0435\u043b\u0438\u043a\u0430\u00bb), \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f. \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0443 \u043c\u0435\u043d\u044f \u0441\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0439: \u043a\u0430\u043a \u0432 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445 (\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445), \u0442\u0430\u043a \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 (rem&#8217;\u0430\u0445). \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0432\u043d\u043e 1 \u043f\u0438\u043a\u0441\u0435\u043b\u044e. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u044b\u043b \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c, \u0430 \u0435\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0430, \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 rem&#8217;\u0430\u0445 (\u0434\u043e\u043b\u044f\u0445 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430). \u00ab\u041c\u0430\u043a\u0440\u043e\u0441\u00bb (\u043d\u0430\u0437\u043e\u0432\u0451\u043c \u0435\u0433\u043e \u043f\u043e\u043a\u0430 \u0442\u0430\u043a) <code>rp()<\/code> \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 rem&#8217;\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0435\u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0441\u044f\u0442\u0438\u0447\u043d\u044b\u0445 \u0434\u0440\u043e\u0431\u0435\u0439, \u0430 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \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 (\u0438\u043b\u0438, \u0438\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435 100%, \u0435\u0441\u043b\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u0448\u0440\u0438\u0444\u0442\u0443).<\/p>\n<p>\u0420\u0430\u043d\u0435\u0435 \u044f \u0443\u0436\u0435 <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/874486\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b<\/a> \u043f\u0440\u043e <code>rp()<\/code>, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0438 \u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u00ab\u043c\u0430\u043a\u0440\u043e\u0441\u0430\u0445\u00bb\u00a0(\u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e <em>LESS-\u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/em>), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\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 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445\u00bb, \u043d\u043e \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430, \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043a\u0438 (\u0447\u0435\u0433\u043e LESS \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442) \u0438 \u0434\u0430\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433\u0443 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 (\u0434\u0430, \u041a\u0430\u0440\u043b! \u0447\u0442\u043e\u0431\u044b \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u043f\u0430\u0434\u0430\u043b\u0430 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439\u00a0\u2014\u00a0\u043f\u0443\u0441\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u0434\u0435\u0432\u0435\u043b\u043e\u043f\u0435\u0440 \u0443\u0437\u043d\u0430\u0435\u0442 \u043e\u0431 \u044d\u0442\u043e\u043c \u043e\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0447\u0435\u043c \u0443\u0441\u043b\u044b\u0448\u0438\u0442 \u0432 \u043f\u043e\u0434\u0432\u043e\u0440\u043e\u0442\u043d\u0435\u2026 \u043a\u0443\u0434\u0430 \u0435\u0433\u043e \u0432\u044b\u0433\u043e\u043d\u044f\u0442 \u0438\u0437 \u043e\u0444\u0438\u0441\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d).<\/p>\n<p>\u041d\u0443 \u0447\u0442\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u0443 \u043a\u0430\u0440\u0442\u0443 \u0432 \u0434\u0432\u0430 \u0441\u043f\u0438\u0441\u043a\u0430:<\/p>\n<pre><code class=\"css\">:root { \u2026 each(@frame-offset-map, { @minus-value: -@value; --focus-frame-@{key}-offset-out: @value; --focus-frame-@{key}-offset-in: @minus-value; }); \u2026 } <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u0440\u0442\u044b\u00a0\/\u00a0\u0440\u0443\u043b\u0441\u0435\u0442\u0430, \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>@value<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u043d\u043e \u0438 <code>@key<\/code> \u0441 \u0438\u043c\u0435\u043d\u0435\u043c (\u0430 \u0435\u0449\u0451\u00a0\u2014\u00a0<code>@index<\/code> \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438).<\/p>\n<p>\u0418 \u0432\u043e\u0442, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438 \u0441\u0434\u0432\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432 \u043d\u0451\u043c:<\/p>\n<pre><code class=\"css\">:root { \u2026 --focus-frame-min-offset-out: 1px; --focus-frame-min-offset-in: -1px; --focus-frame-xxs-offset-out: 0.1875rem; --focus-frame-xxs-offset-in: -0.1875rem; --focus-frame-xs-offset-out: 0.25rem; --focus-frame-xs-offset-in: -0.25rem; --focus-frame-sm-offset-out: 0.3125rem; --focus-frame-sm-offset-in: -0.3125rem; --focus-frame-md-offset-out: 0.625rem; --focus-frame-md-offset-in: -0.625rem; --focus-frame-lg-offset-out: 0.9375rem; --focus-frame-lg-offset-in: -0.9375rem; \u2026 } <\/code><\/pre>\n<p>\u0413\u043b\u044f\u0434\u044f \u043d\u0430 \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 rem&#8217;\u0430\u0445, \u0432\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e, \u043e\u0446\u0435\u043d\u0438\u043b\u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u00ab\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445\u00bb.<\/p>\n<p>\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438, \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043d\u043e \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0443\u0442\u0438\u043b\u0438\u0442:<\/p>\n<pre><code class=\"css\">@outline-offset-map: { min: 1px; \/\/ Minimal possible offset. xxs: rp(3); xs: rp(4); sm: rp(5); md: rp(10); lg: rp(15); };  each(@outline-offset-map, { @minus-value: -@value;  .outline-offset-@{key}-out \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442: .outline-offset-out-@{index} { outline-offset: @value; }  .outline-offset-@{key}-in \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442: .outline-offset-in-@{index} { outline-offset: @minus-value; } }); <\/code><\/pre>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0434\u0432\u0430 \u0441\u043f\u0438\u0441\u043a\u0430:<\/p>\n<pre><code class=\"css\">.outline-offset-min-out {   outline-offset: 1px; } .outline-offset-min-in {   outline-offset: -1px; } .outline-offset-xxs-out {   outline-offset: 0.1875rem; } .outline-offset-xxs-in {   outline-offset: -0.1875rem; } .outline-offset-xs-out {   outline-offset: 0.25rem; } .outline-offset-xs-in {   outline-offset: -0.25rem; } .outline-offset-sm-out {   outline-offset: 0.3125rem; } .outline-offset-sm-in {   outline-offset: -0.3125rem; } .outline-offset-md-out {   outline-offset: 0.625rem; } .outline-offset-md-in {   outline-offset: -0.625rem; } .outline-offset-lg-out {   outline-offset: 0.9375rem; } .outline-offset-lg-in {   outline-offset: -0.9375rem; } <\/code><\/pre>\n<p>\u0418, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u0443\u0436 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e\u043c \u0443\u0442\u0438\u043b\u0438\u0442, \u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0430 \u043d\u0435 \u043f\u0438\u0445\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 (\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438\u0437 \u043a\u0430\u0440\u0442\u044b), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u0434\u043d\u0430\u0436\u0434\u044b, \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u044f \u0448\u0430\u0433\u0438 \u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438, \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0432\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u043c\u0438\u043d\u0443\u0441\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0435 \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e\u0439 \u0440\u0430\u043c\u043a\u0435 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430\u0440\u0443\u0436\u0443. \u0410 \u0435\u0449\u0451, \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043e\u0434\u043d\u043e \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e, \u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d Bootstrap, \u0433\u0434\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0438 <code>margin<\/code>&#8216;\u044b, \u0438 <code>padding<\/code>&#8216;\u0438.<\/p>\n<h3>\u276f \u00ab\u0424\u043e\u0440\u043c\u0443\u043b\u0430, \u0433\u0434\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u0430?!\u00bb<\/h3>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430, \u0430 \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ml\/8c\/e6\/ml8ce6za5mu_r-liu0cbmpf-jfg.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/ml\/8c\/e6\/ml8ce6za5mu_r-liu0cbmpf-jfg.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/ml\/8c\/e6\/ml8ce6za5mu_r-liu0cbmpf-jfg.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0435\u0442\u043a\u0430, \u043d\u043e \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u043c\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432\u00a0\u2014\u00a0\u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jn\/xt\/mx\/jnxtmx6qq4_78cttyv7ekrshfaw.gif\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/webt\/jn\/xt\/mx\/jnxtmx6qq4_78cttyv7ekrshfaw.gif 780w,&#10;       https:\/\/habrastorage.org\/webt\/jn\/xt\/mx\/jnxtmx6qq4_78cttyv7ekrshfaw.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041b\u0438\u0447\u043d\u043e \u044f, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441 Javascript&#8217;\u043e\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <em>visibility observer<\/em> \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0443\u044f\u0441\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>data-visible-part=\"0.3\"<\/code>, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u043c \u043f\u043e\u0440\u043e\u0433 \u043f\u043b\u043e\u0449\u0430\u0434\u0438, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u044b\u043c, \u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>autoplay-once<\/code>, \u0437\u0430\u0434\u0430\u044e\u0449\u0438\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435), \u0441\u0430\u043c\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00ab\u043f\u0435\u0440\u0432\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u00bb \u0438 \u00ab\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u00bb\u00a0, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\/\u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043a\u043b\u0430\u0441\u0441 <code>start-autoplaying<\/code>.<\/p>\n<p>\u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u043d\u0430\u0434\u043e, \u043a\u0430\u043a \u043f\u043e\u0451\u0442 \u0433\u0440\u0443\u043f\u043f\u0430 \u0411\u0438-2, \u00ab\u0437\u0430\u0436\u0438\u0433\u0430\u0442\u044c \u0438 \u0433\u0430\u0441\u0438\u0442\u044c\u00bb. \u0412 \u0441\u043c\u044b\u0441\u043b\u0435, \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0437\u0430\u0436\u0438\u0433\u0430\u0442\u044c \u0438 \u0433\u0430\u0441\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e. \u0421\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 <code>&lt;div&gt;<\/code>&#8216;\u0430\u043c\u0438, \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0447\u044c\u0438 \u00ab\u0445\u0432\u043e\u0441\u0442\u0438\u043a\u0438\u00bb \u0437\u0430 \u0435\u0451 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0443\u0445\u043e\u0434\u044f\u0442 \u0432 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u043e\u0439 \u0437\u0430\u043b\u0438\u0432\u043a\u0438. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u043e\u043a\/\u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 <code>.horz.horz-i<\/code>\/<code>.vert.vert-i<\/code>, \u0433\u0434\u0435 <code>i<\/code> \u044d\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441 (\u043f\u0440\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 <em>\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/em>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0447\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0443\u043a\u0430\u043c\u0438, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0437). \u00ab\u0417\u0430\u0436\u0438\u0433\u0430\u043d\u0438\u0435 \u0438 \u0433\u0430\u0448\u0435\u043d\u0438\u0435\u00bb \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0430\u0441\u043a\u0430\u0434\u0440\u043e\u0432\u043a\u043e\u0439, \u0433\u0434\u0435 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0441\u0442\u0451\u0442 \u0434\u043e 30% \u0438 \u043f\u043e\u0442\u043e\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043f\u0430\u0434\u0430\u0435\u0442 \u0434\u043e \u043d\u0443\u043b\u044f:<\/p>\n<pre><code class=\"css\">&amp;.start-autoplaying { &amp; &gt; .vert, &amp; &gt; .horz { @keyframes blink-stripe_focus-grid { 0%{opacity: 0;} 20%{opacity: 0.3;} 100%{opacity: 0;} }  animation: blink-stripe_focus-grid @fading-duration ease-out forwards; } } <\/code><\/pre>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043b\u0438\u0448\u044c \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043d\u0430\u0440\u0430\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u0430\u0443\u0437\u044b \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0438\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>animation-delay<\/code> \u0434\u043e\u043b\u0436\u043d\u043e \u043b\u0438\u043d\u0435\u0439\u043d\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0441\u0442\u0440\u043e\u043a\u0438\/\u0441\u0442\u043e\u043b\u0431\u0446\u0430). \u0414\u043b\u044f \u043f\u0443\u0449\u0435\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0451 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b?<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a \u0440\u0443\u043a\u0430\u043c\u0438. \u0418 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0447\u0435\u043d\u044c \u043c\u0443\u0442\u043e\u0440\u043d\u043e \u0438 \u0431\u043e\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438\u0437 Javascript&#8217;\u0430, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0438\u043c <code>animation-delay<\/code> \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435. \u0418 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0438\u0437 \u043d\u0438\u0445\u00a0\u2014\u00a0\u043c\u044b \u0440\u0430\u0437\u043d\u0435\u0441\u0451\u043c \u043a\u043e\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u0434\u0432\u0443\u043c \u0444\u0430\u0439\u043b\u0430\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e (\u0441\u043c. \u0432\u044b\u0448\u0435 \u043f\u0440\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0442\u0435\u043c\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f). \u041d\u043e \u0435\u0449\u0451 \u043c\u044b \u043f\u043e\u0442\u0430\u0449\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0442\u0443\u0434\u0430, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0433\u043e\u043b\u044b\u043c CSS, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u043e \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (\u043e\u0434\u043d\u043e \u0434\u0435\u043b\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 CSS, \u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0435, \u043a\u043e\u0433\u0434\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438), \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <strong>DevTools<\/strong>.<\/p>\n<p>\u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a \u0438\u0437 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430, \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u0437\u044f\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u043e\u0431\u043e\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432: \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u043b\u044b\u0439 CSS, \u0430 \u0434\u043b\u044f \u0441\u0435\u0431\u044f\u00a0\u2014\u00a0\u0444\u043e\u0440\u043c\u0443\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code class=\"css\">.focus-grid { @iconset-src: '..\/images\/iconset.png'; @iconset-width: image-width(@iconset-src); @iconset-height: image-height(@iconset-src);  \/\/ \u0416\u0434\u0451\u043c, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 LESS \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \/\/ \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 AI. (\u0428\u0443\u0442\u043a\u0430 \u044e\u043c\u043e\u0440\u0430). @vert-stripes-count: 5; @horz-stripes-count: 8;  \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u00ab\u0445\u0432\u043e\u0441\u0442\u0438\u043a\u043e\u0432\u00bb \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 @vert-stick-out: 50px; @horz-stick-out: 50px;  @vert-stripe-width: (@iconset-width \/ @vert-stripes-count); @horz-stripe-height: (@iconset-height \/ @horz-stripes-count); @step-duration: 0.1s; @fading-duration: 1s;  \/\/ \u0421\u0442\u043e\u043b\u0431\u0446\u044b &amp; &gt; .vert { .size(@vert-stripe-width, calc(100% + 2 * @vert-stick-out));  top: (-1 * @vert-stick-out); background-image: linear-gradient( transparent, white @vert-stick-out, white (@vert-stick-out + @iconset-height), transparent 100%);  each(range(@vert-stripes-count), { &amp;.vert-@{value} { left: (@value - 1) * @vert-stripe-width; animation-delay: @value * @step-duration !important; } }); }  \/\/ \u0421\u0442\u0440\u043e\u043a\u0438 &amp; &gt; .horz { .size(calc(100% + 2 * @horz-stick-out), @horz-stripe-height);  left: (-1 * @horz-stick-out); background-image: linear-gradient( to right, transparent, white @horz-stick-out, white (@horz-stick-out + @iconset-width), transparent 100%);  each(range(@horz-stripes-count), { &amp;.horz-@{value} { top: (@value - 1) * @horz-stripe-height; animation-delay: (@vert-stripes-count * @step-duration + @value * @step-duration) !important; } }); } } <\/code><\/pre>\n<p>\u0412\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445:<\/p>\n<pre><code class=\"css\">animation-delay: @value * @step-duration !important; \u2026 animation-delay: (@vert-stripes-count * @step-duration + @value * @step-duration) !important; <\/code><\/pre>\n<p><code>@value<\/code> \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u00a0\u2014\u00a0\u044d\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441 \u0446\u0438\u043a\u043b\u0430. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e LESS \u0431\u0435\u0434\u043d\u043e\u0432\u0430\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u0443\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c \u0442\u0438\u043f\u0430 PHP? \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043d\u0435\u0433\u043e, \u0432 LESS \u043d\u0435\u0442 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u043e\u0432 \u0432\u0438\u0434\u0430 <code>for (@i = 0; @i &lt; @vert-stripes-count; @i++)<\/code>, \u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>range()<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>each()<\/code> \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u0430.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435, \u043d\u0430 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u044d\u0442\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"css\">.focus-grid { \/\/ \u0421\u0442\u043e\u043b\u0431\u0446\u044b &amp; &gt; .vert { &amp;.vert-@{value} { \u2026 } }  \/\/ \u0421\u0442\u0440\u043e\u043a\u0438 &amp; &gt; .horz { &amp;.horz-@{value} { \u2026 } } } <\/code><\/pre>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 <code>&amp;<\/code> \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0438\u043c\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (<code>.focus-grid<\/code>), \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>.vert<\/code> \u0438 <code>.horz<\/code>, \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 <code>.focus-grid<\/code> (\u0438\u0437-\u0437\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u044f <code>&gt;<\/code>).<\/p>\n<p>\u0410 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 <code>&amp;<\/code> \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>.vert<\/code> \u0438 <code>.horz<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0443\u0442\u043e\u0447\u043d\u044f\u0435\u043c, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a \u043d\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b <code>.vert-1<\/code>, <code>.vert-2<\/code> \u0438 \u0442.\u0434. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437-\u0437\u0430 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u043a <code>&amp;<\/code> \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443.<\/p>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u044d\u0442\u043e \u0434\u0430\u0451\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u043e\u0432:<\/p>\n<pre><code class=\"css\">.focus-grid &gt; .vert.vert-1 {   left: 0px;   animation-delay: 0.1s !important; } .focus-grid &gt; .vert.vert-2 {   left: 52px;   animation-delay: 0.2s !important; } \u2026 .focus-grid &gt; .vert.vert-5 {   left: 208px;   animation-delay: 0.5s !important; } .focus-grid &gt; .horz.horz-1 {   top: 0px;   animation-delay: 0.6s !important; } .focus-grid &gt; .horz.horz-2 {   top: 52px;   animation-delay: 0.7s !important; } \u2026 .focus-grid &gt; .horz.horz-8 {   top: 364px;   animation-delay: 1.3s !important; } <\/code><\/pre>\n<p>\u0418 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e Javascript&#8217;\u0430.<\/p>\n<hr\/>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431\u043e \u0432\u0441\u0451\u043c, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u0435\u0449\u0430\u043d\u043e \u0432 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043d\u043e \u0442\u0430\u043a \u0438 \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u043e, \u0430 \u0435\u0449\u0451\u00a0\u2014\u00a0\u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0438\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435, \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c \u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e, \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043c \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442, \u043f\u0440\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0432 \u0440\u043e\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0430 \u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432) \u0438 \u043c\u043d\u043e\u0433\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u00a0\u2014\u00a0\u00ab\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043b\u0430\u0439\u043a, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u00bb, \u0447\u0442\u043e\u0431\u044b \u044f \u0437\u043d\u0430\u043b, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u0443-\u0442\u043e \u0435\u0449\u0451 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0442\u0430 \u0438\u043b\u0438 \u0438\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u043f\u0440\u043e UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0442\u0443\u0442 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044e.<\/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<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/l4\/va\/3_\/l4va3_wb_-jzyhjkp0scerkikj8.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/l4\/va\/3_\/l4va3_wb_-jzyhjkp0scerkikj8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/l4\/va\/3_\/l4va3_wb_-jzyhjkp0scerkikj8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\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\/926720\/\"> https:\/\/habr.com\/ru\/articles\/926720\/<\/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 \u0441\u0438\u043b\u0443 \u043b\u0438\u0447\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 (\u044f \u0447\u0430\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043d\u0435 \u043d\u0430\u0434 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u0430 \u043d\u0430\u0434 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c\u0438 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0438\u0448\u0443 \u043d\u0430 HTML\/CSS), \u044f \u0434\u043e\u043b\u0433\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u043b \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u00ab\u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b CSS-\u0444\u0430\u0439\u043b \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0435\u0433\u043e\u00bb, \u0438 \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f CSS-\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0434\u043d\u043e, \u043d\u043e\u2026 \u0412 \u043d\u0430\u0448\u0438 \u0434\u043d\u0438 \u043e\u043d, \u0432 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u043d\u0438\u0447\u0443\u0442\u044c \u043d\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b, \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0440\u0430\u043d\u044c\u0448\u0435. \u0422\u0430\u043a \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 CSS (\u0430 \u043d\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0435 \u0435\u0433\u043e) \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0443\u0433\u043e\u0434\u043d\u043e (SPA, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0438, \u0432\u0435\u0431-\u0430\u043f\u043f\u044b \u0438 \u0442.\u0434.), \u043d\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c LESS \u0438\u043b\u0438 SASS\u00a0\u2014\u00a0\u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u043f\u043e\u0434 \u043a\u0430\u0442, \u0433\u0434\u0435 \u044f, \u0441\u0442\u0430\u0440\u0430\u044f\u0441\u044c \u043d\u0435 \u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u00ab\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439-\u043f\u0435\u0440\u0435\u0441\u043a\u0430\u0437-\u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430\u00bb, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 LESS, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445, \u0435\u0433\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0430\u043c\u0438 \u0438 \u043f\u0440\u0438\u0451\u043c\u0430\u043c\u0438 (\u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438). \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u0438\u0448\u0435\u0442\u0435 CSS, \u043d\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c: \u044f \u043f\u0440\u043e\u0432\u043e\u0436\u0443 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0438 LESS, \u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e\u0431 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u0410\u043b\u0430\u043d\u0430 \u041a\u0435\u044f.<\/p>\n<figure class=\"\"><\/figure>\n<h2>\u276f \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u0442\u044c<\/h2>\n<h3>\u276f LESS or SASS? That is the question<\/h3>\n<p>\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u044f \u043d\u0430\u0447\u0430\u043b \u043d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u043d\u043e \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b \u0435\u0433\u043e \u043f\u043e\u043b\u044e\u0431\u0438\u0442\u044c, \u0438 \u0441\u043c\u0435\u043b\u043e \u0441\u043a\u0430\u0436\u0443: \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043c\u043e\u0449\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b, \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u0432\u0441\u0451 \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0433\u043e\u043b\u043e\u0433\u043e CSS-\u043a\u043e\u0434\u0430! \u0418 \u0442\u0430\u043a \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0435 \u044f \u043e\u0434\u0438\u043d:<\/p>\n<blockquote>\n<p><em>so it seems like all the hype of being finally able to throw out sass, bootstrap etc, and use vanilla css in 2024, was just that.. hype. Something so very simple that continues to make css frameworks or preprocessors an unfortunate necessity still<\/em><\/p>\n<p>\u2014\u00a0\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c StackOverflow <a href=\"https:\/\/stackoverflow.com\/questions\/40722882\/css-native-variables-not-working-in-media-queries\" rel=\"noopener noreferrer nofollow\">\u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043d<\/a> \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445<\/p>\n<\/blockquote>\n<p>\u0425\u043e\u0442\u044f \u044f \u0438 \u0437\u043d\u0430\u044e \u043b\u044e\u0434\u0435\u0439, \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043b\u044e\u0431\u044b\u0435 DSL&#8217;\u0438 \u00ab\u043f\u0442\u0438\u0447\u044c\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c\u00bb, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u043d\u043e \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0439 DRY (\u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c CSS, \u0443\u0432\u044b, \u043d\u0435\u0443\u0441\u0442\u0440\u0430\u043d\u0438\u043c\u044b.<\/p>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0442\u0443\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 SASS (\u00abadvanced features\u00bb, \u00abrobustness\u00bb \u0438 \u0442.\u0434.), \u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c, \u0447\u0442\u043e \u044f \u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043d\u0451\u043c, \u0435\u0441\u043b\u0438 \u0431\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 SASS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u00ab\u0440\u043e\u0434\u043d\u044b\u0435\u00bb \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\u00a0\u2014\u00a0\u0432\u0435\u043b\u0438\u043a\u043e\u0435 \u0431\u043b\u0430\u0433\u043e. (\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438, \u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c, \u043a\u0430\u043a \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u0430 \u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439). \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u00a0\u2014\u00a0<strong>Bootstrap<\/strong>, \u043e \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f <a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/874486\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b<\/a> \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<p>\u042f \u0436\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 LESS (\u043a\u0430\u043a \u043d\u0435\u0442\u0440\u0443\u0434\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043e \u043d\u0451\u043c \u0434\u0430\u043b\u0435\u0435 \u0438 \u043f\u043e\u0439\u0434\u0451\u0442 \u0440\u0435\u0447\u044c), \u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 Javascript&#8217;\u0435. \u0415\u0433\u043e \u0436\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 (\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432).<\/p>\n<h3>\u276f LESS: \u044f\u0437\u044b\u043a \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, <strong>LESS<\/strong> (\u043e\u043d \u0436\u0435 <strong>LESSCSS<\/strong>) \u044d\u0442\u043e \u0441\u0430\u043c \u044f\u0437\u044b\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e \u0441\u0432\u043e\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0436\u0438\u0432\u0451\u0442 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"https:\/\/lesscss.org\/\" rel=\"noopener noreferrer nofollow\">https:\/\/lesscss.org\/<\/a>. \u0410 <strong>Less.js<\/strong>\u00a0\u2014\u00a0\u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f (\u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0437\u043d\u0430\u044e) \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0447\u0435\u0439 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435: <a href=\"https:\/\/github.com\/less\/less.js\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/less\/less.js<\/a>.<\/p>\n<p>\u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/github.com\/less\/less.js\/discussions\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0439<\/a> \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 \u00ab\u041a\u0430\u043a \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439-\u0442\u043e CSS?\u00bb, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u0440\u043e\u0431\u043e\u0442 \u0414\u043e\u0441\u044f (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0432\u043f\u043e\u043f\u0430\u0434). \u0418 \u0445\u043e\u0442\u044f \u0432 <em>readme.md<\/em> \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 <em>StackOverflow<\/em> \u043a\u0430\u043a \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u00ab\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u0439\u00bb, \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0437\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f SO-\u043a\u0440\u0438\u0437\u0438\u0441\u0430 \u0448\u0430\u043d\u0441\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435, \u044f \u0431\u044b \u0441\u043a\u0430\u0437\u0430\u043b, \u0432\u044b\u0448\u0435.<\/p>\n<p>\u0415\u0449\u0451 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u043f\u043e\u0440\u0442\u0438\u0442\u044c \u0431\u0430\u0433\u0438, \u0438 \u0438\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e. (\u041c\u043d\u0435, \u043a\u0430\u043a \u0441\u0443\u0440\u043e\u0432\u043e\u043c\u0443 \u0447\u0435\u043b\u044f\u0431\u0438\u043d\u0441\u043a\u043e\u043c\u0443 \u043c\u0443\u0436\u0438\u043a\u0443, \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u0434\u0435\u043d\u044c \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u043f\u0443\u0442\u0451\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u044f <code>:has()<\/code> \u0432 <code>:is()<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u043d \u0436\u0430\u043b\u043e\u0431\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u043b: <code>Missing\u00a0closing\u00a0')'<\/code>. \u0412\u043e\u0442 \u0442\u043e-\u0442\u043e \u0436\u0435!)<\/p>\n<figure class=\"\">\n<div><figcaption>\u0412\u043e\u0442 \u0442\u043e-\u0442\u043e \u0436\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438\u00a0\u2014\u00a04.3.0 \u043e\u0442 09 \u0430\u043f\u0440\u0435\u043b\u044f 2025 \u0433\u043e\u0434\u0430. \u041d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437 \u0432 3 \u043c\u0435\u0441\u044f\u0446\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443, \u043a\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Javascript, \u0443 \u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0438\u0441\u043a\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 LESS, \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c .less-\u0444\u0430\u0439\u043b\u044b \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 CSS \u043d\u0430 \u043b\u0435\u0442\u0443, \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0431\u0435\u0437 \u043e\u0447\u0435\u043d\u044c \u0432\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e. \u0421\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0437\u0430\u0447\u0435\u043c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0435\u0434\u043d\u044b\u0445 \u044e\u0437\u0435\u0440\u043e\u0432 \u0440\u0430\u0441\u0447\u0451\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0431\u0438\u043b\u0434-\u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435\/\u0434\u0435\u043f\u043b\u043e\u0435. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u0448\u0438\u043d\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0438\u043c\u0435\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0432 \u0430\u0434\u0434\u043e\u043d\u0435 \u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u043d\u043e \u043a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u0439\u0442\u0438 \u0430\u0434\u0434\u043e\u043d \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 IDE, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0444\u0430\u0439\u043b\u044b .less \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438.<\/p>\n<p>\u0421\u0430\u043c \u044f, \u0432 \u0441\u0438\u043b\u0443 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 (\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f) \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c <strong>Visual Studio 2022<\/strong>, \u0438 \u043c\u043e\u0433\u0443 \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \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\u00a0Compiler\u00a02022+<\/a>, \u0445\u043e\u0442\u044f \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0438 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 IDE. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f <strong>Web Compiler 2022+<\/strong>, \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0430\u043f\u043a\u0443 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f) \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0433\u043e \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 .less. \u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0444\u0430\u0439\u043b. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u2026 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u0430\u044f. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u043c \u043e\u043a\u043e\u043b\u043e 10 \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 LESS, \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 CSS \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0435-\u0441\u043b\u0430\u0431\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434. \u0422\u0430\u043a \u0447\u0442\u043e, \u0438\u043b\u0438 \u0431\u0435\u0440\u0438\u0442\u0435 \u043c\u0430\u0448\u0438\u043d\u0443 \u043f\u043e\u043c\u043e\u0449\u043d\u0435\u0435, \u0438\u043b\u0438 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c F5 \u043f\u0430\u0440\u0443 \u0440\u0430\u0437, \u043f\u043e\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f IDE\u00a0\u2014\u00a0\u043b\u0438\u0448\u044c \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c <strong>LESS.js<\/strong>, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430\u044f, \u0438 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430.<\/p>\n<blockquote>\n<p><strong>\u2139\ufe0f Web Compiler 2022+<\/strong><br \/> \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u044f\u0432\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0430\u0439\u043b\u0430 <code>compilerconfig.json<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443:<br \/> <code> [<\/code><br \/> <code>{<\/code><br \/> <code>\"inputFile\": \"css\/main.less\",<\/code><br \/> <code>\"outputFile\": \"css\/main.css\",<\/code><br \/> <code>\"options\":<\/code><br \/> <code>{<\/code><br \/> <code>\"sourceMap\": true,<\/code><br \/> <code>\"relativeUrls\": true<\/code><br \/> <code>}<\/code><br \/> <code>}<\/code><br \/> <code>]<\/code><\/p>\n<\/blockquote>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 (\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e \u042f\u041f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439), \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a TypeScript, LESS \u043d\u0435 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044f\u0437\u044b\u043a. \u041d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u043e\u043d \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 <em>\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438<\/em> CSS.<\/p>\n<p>\u042d\u0442\u0430 \u0436\u0435 \u0447\u0435\u0440\u0442\u0430 (\u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 CSS) \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u043e\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 (\u0442\u0438\u043f\u0430 PHP, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u0442\u043e\u0436\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0434\u0438\u043d \u043a\u043e\u0434 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e). \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, PHP \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u0435, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0421\u0423\u0411\u0414. LESS \u0436\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043e\u043a \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 (\u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0432 \u043d\u0451\u043c \u043c\u0430\u043b\u043e), \u0430 \u0435\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u0435-\u043a\u0430\u043a\u0438\u0435 I\/O-\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438), \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435. \u041a\u0430\u043a \u043f\u043e\u0448\u0443\u0442\u0438\u043b \u0430\u0432\u0442\u043e\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430 \u043f\u043e LESS, \u0445\u043e\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS, \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0437 \u043d\u0435\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, LESS \u043d\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0442\u0435\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0435\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d \u043a CSS. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u043d\u0451\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439:<\/p>\n<pre><code class=\"css\">\/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445: @snow-src: '..\/images\/snow.png'; @tree-blue-color: #a2e2ff; @minus-value: -@value;  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435: .cover { background-image: url(@snow-src); color: @tree-blue-color; --direction: @minus-value; } <\/code><\/pre>\n<p>\u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u00ab\u0441\u043e\u0431\u0430\u043a\u0443\u00bb <code>@<\/code>, \u0430 \u043d\u0435 \u0434\u0432\u043e\u0439\u043d\u043e\u0439 \u043c\u0438\u043d\u0443\u0441 <code>--<\/code> (\u0435\u0449\u0451, \u043a\u0430\u043a \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0434\u043b\u044f <em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/em> \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 <code>var()<\/code>). \u0410 \u043a\u0440\u0430\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f LESS\u00a0\u2014\u00a0\u043c\u0438\u043a\u0441\u0438\u043d\u044b\u00a0\u2014\u00a0\u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u044b \u0432 CSS:<\/p>\n<pre><code class=\"css\">\/\/ \u042f \u043c\u0438\u043a\u0441\u0438\u043d .text() .text(@font-size, @font-weight) { line-height: 1.5; font-size: @font-size; font-weight: @font-weight; }  \/\/ \u042f \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 .debugA when (@debug = true) { background-color: aliceblue; } <\/code><\/pre>\n<h3>\u276f \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (compile-time) \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (runtime) \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438<\/h3>\n<p>\u0412\u044b\u0448\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 LESS. \u041e\u043d\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u0430\u043c\u0438\u043c LESS \u0432 2009 \u0433\u043e\u0434\u0443, \u0437\u0430\u0434\u043e\u043b\u0433\u043e \u0434\u043e CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0441\u0435\u043c\u044c \u043b\u0435\u0442 \u0441\u043f\u0443\u0441\u0442\u044f, \u0432 2017). \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 LESS, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 CSS? \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442 \u043c\u044b\u0441\u043b\u044c \u0434\u0430\u043b\u044c\u0448\u0435: \u043c\u043e\u043b, \u0438 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0432 \u0446\u0435\u043b\u043e\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041d\u0443, \u0438\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 W3C \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0434\u043e\u043f\u0438\u043b\u0438\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b. (\u0410 \u043e\u043d \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0441\u044f: 15 \u043c\u0430\u044f 2025 \u0433\u043e\u0434\u0430 \u043f\u043e \u043d\u0438\u043c \u0431\u044b\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u043b\u0438\u0448\u044c <a href=\"https:\/\/www.w3.org\/TR\/css-mixins-1\/\" rel=\"noopener noreferrer nofollow\">First Public Working Draft<\/a>). \u0414\u043e\u043b\u044f \u043f\u0440\u0430\u0432\u0434\u044b \u0432 \u044d\u0442\u043e\u043c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u0430\u043a \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0431\u044b\u043b\u043e, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f.<\/p>\n<p>\u041d\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0432 CSS. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 LESS \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u044d\u0442\u0438\u0445 \u0432\u0435\u0449\u0435\u0439, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 CSS \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u044f\u043a\u043e\u0431\u044b \u00ab\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435\u00bb \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 <code>:root<\/code>, \u043c\u044b \u0441\u043a\u043b\u043e\u043d\u043d\u044b \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445: \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;html&gt;<\/code>.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u00a0\u2014\u00a0\u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435) \u043f\u043e <em>\u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/em>. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 CSS\u00a0\u2014\u00a0<em>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435<\/em>. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u0442\u0435\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <em>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em> (\u0438\u0437 Javascript&#8217;\u0430) \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0436\u0435 \u0432 LESS\u00a0\u2014\u00a0<em>\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435<\/em> (<em>\u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/em>). \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043e\u043d\u0438 \u0443\u0436\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442, \u0438 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e. \u0413\u043b\u044f\u0434\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0433\u043b\u0430 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439, \u0442\u0430\u043a \u0438 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043d\u043e\u0439, \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0430 \u043d\u0443\u0436\u043d\u0430\u00a0\u2014\u00a0\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <code>@<\/code>), \u0438\u043b\u0438 \u0436\u0435 \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <\/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-467520","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/467520","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=467520"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/467520\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=467520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=467520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=467520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}