{"id":5581,"date":"2024-03-28T05:46:01","date_gmt":"2024-03-28T05:46:01","guid":{"rendered":"https:\/\/devblondie.com\/?p=5581"},"modified":"2024-05-27T12:44:22","modified_gmt":"2024-05-27T12:44:22","slug":"css-preprocessors","status":"publish","type":"post","link":"https:\/\/devblondie.com\/css-preprocessors\/","title":{"rendered":"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &#038; Sass &#8211; \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435"},"content":{"rendered":"\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-28c8a53\" data-block-id=\"28c8a53\"><p class=\"stk-table-of-contents__title\"><strong>\u0412 \u0442\u043e\u0437\u0438 \u0443\u0440\u043e\u043a:<\/strong><\/p><ul class=\"stk-table-of-contents__table\"><li><a href=\"#undefined\">\u041a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435?<\/a><\/li><li><a href=\"#undefined\">\u0417\u0430\u0449\u043e \u0434\u0430 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438?<\/a><\/li><li><a href=\"#undefined\">Sass \u0438 Less<\/a><\/li><li><a href=\"#undefined\">\u0418\u043d\u0441\u0442\u0430\u043b\u0430\u0446\u0438\u044f \u0438 \u0435\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a><\/li><li><a href=\"#undefined\">\u0424\u0443\u043d\u043a\u0446\u0438\u0438<\/a><\/li><li><a href=\"#undefined\">\u041f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u0438<\/a><ul><li><a href=\"#undefined\">\u041f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438<\/a><\/li><li><a href=\"#undefined\">\u041c\u0438\u043a\u0441\u0438\u043d\u0438 (Mixins)<\/a><\/li><\/ul><\/li><li><a href=\"#undefined\">Sass \u0441\u0440\u0435\u0449\u0443 Less<\/a><\/li><li><a href=\"#undefined\">\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/li><\/ul><\/nav>\n\n\n\n<p>\u041f\u0438\u0441\u0430\u043d\u0435\u0442\u043e \u043d\u0430 \u0441\u0442\u0438\u043b\u043e\u0432\u0435 \u0437\u0430 \u0443\u0435\u0431 \u0441\u0430\u0439\u0442 \u0441\u0438 \u0435 \u0432\u0438\u0434 \u0438\u0437\u043a\u0443\u0441\u0442\u0432\u043e. \u0414\u043e\u043a\u0430\u0442\u043e \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u0438 \u043c\u0435\u0442\u043e\u0434\u0438 \u0437\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0438\u0440\u0430\u043d\u0435 \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u0430\u043d\u0435 \u043d\u0430 DOM \u0434\u044a\u0440\u0432\u043e\u0442\u043e \u0438 HTML \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0442\u0435, \u0435 \u0432\u0430\u0436\u043d\u043e \u0434\u0430 \u043f\u043e\u0434\u0434\u044a\u0440\u0436\u0430\u043c\u0435 \u0435\u0434\u0438\u043d \u0441\u0442\u0438\u043b \u043d\u0430 \u043f\u0438\u0441\u0430\u043d\u0435 \u0438 \u0434\u0430 \u0441\u043c\u0435 \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u0438, \u0437\u0430 \u0434\u0430 \u0438\u0437\u0431\u0435\u0433\u043d\u0435\u043c \u0431\u044a\u0434\u0435\u0449\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0438 \u0432 layout-a \u043d\u0430 \u0441\u0430\u0439\u0442\u0430.<\/p>\n\n\n\n<p>\u0412 \u0442\u043e\u0437\u0438 \u0443\u0440\u043e\u043a \u0449\u0435 \u0442\u0438 \u0440\u0430\u0437\u043a\u0430\u0436\u0430 \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435 \u0438 \u0449\u0435 \u0442\u0438 \u043f\u043e\u043a\u0430\u0436\u0430 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0448, \u0437\u0430 \u0434\u0430 \u0441\u044a\u0437\u0434\u0430\u0432\u0430\u0448 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u043d\u043e \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u0438 \u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u043f\u043e\u0434\u0434\u0440\u044a\u0436\u043a\u0430 \u043a\u043e\u0434 ?<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"?\u200d? CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u0441\u0430, \u043a\u0430\u043a \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442 \u0438 \u0437\u0430\u0449\u043e \u0435 \u0434\u043e\u0431\u0440\u0435 \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0432\u0430\u0448 [+ \u041d\u041e\u0412\u0418\u041d\u0410]\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/HdFQwQjRUts?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u041a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435?<\/h2>\n\n\n\n<p>\u041f\u0440\u0435\u0434\u0438 \u0434\u0430 \u0441\u0435 \u0432\u043f\u0443\u0441\u043d\u0435\u043c \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sass <\/a>\u0438 <a href=\"https:\/\/lesscss.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Less<\/a>, \u0435 \u0432\u0430\u0436\u043d\u043e \u0434\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u0442\u0430 \u043d\u0430 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435 \u0438 \u043a\u0430\u043a\u0432\u0430 \u0435 \u0442\u044f\u0445\u043d\u0430\u0442\u0430 \u043f\u0440\u0438\u0440\u043e\u0434\u0430.<\/p>\n\n\n\n<p>\u0422\u0435\u0437\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438 \u0440\u0430\u0437\u0448\u0438\u0440\u044f\u0432\u0430\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438\u0442\u0435 \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u044f CSS \u0447\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0442\u043e \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438 (variables), \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (functions) \u0438 \u0442.\u043d\u0430\u0440. mixins (\u043d\u0435 \u0441\u0435 \u0442\u0440\u0435\u0432\u043e\u0436\u0438 \u0430\u043a\u043e \u0442\u043e\u0432\u0430 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u043d\u0435 \u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u0438 \u043d\u0438\u0449\u043e, \u0441\u043b\u0435\u0434 \u043c\u0430\u043b\u043a\u043e \u0449\u0435 \u0433\u043e \u0440\u0430\u0437\u0433\u043b\u0435\u0434\u0430\u043c\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e) \u0438 \u0434\u0440.<\/p>\n\n\n\n<p>\u0422\u0435\u0437\u0438 &#8222;\u043f\u043e\u0434\u043e\u0431\u0440\u0435\u043d\u0438\u044f&#8220; \u0443\u043b\u0435\u0441\u043d\u044f\u0432\u0430\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u044a\u0442 \u043f\u043e \u0441\u044a\u0437\u0434\u0430\u0432\u0430\u043d\u0435 \u0438 \u043f\u043e\u0434\u0434\u0440\u044a\u0436\u043a\u0430 \u043d\u0430 \u0441\u0442\u0438\u043b\u043e\u0432\u0435, \u043f\u0440\u0430\u0432\u0435\u0439\u043a\u0438 \u043a\u043e\u0434\u044a\u0442 \u043d\u0438 \u043f\u043e-\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0438\u0440\u0430\u043d \u0438 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0417\u0430\u0449\u043e \u0434\u0430 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438?<\/h2>\n\n\n\n<p>CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u043b\u0430\u0433\u0438\u043d\u043a\u0438 \u0438 \u043c\u043e\u0433\u0430\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u043d\u043e \u0434\u0430 \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0442 (\u0438 \u0437\u0430\u0431\u044a\u0440\u0437\u0430\u0442) \u043f\u0440\u043e\u0446\u0435\u0441\u044a\u0442 \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0432\u0430\u043d\u0435 \u043d\u0430 \u0434\u0430\u0434\u0435\u043d \u0441\u043e\u0444\u0442\u0443\u0435\u0440\u0435\u043d \u043f\u0440\u043e\u0434\u0443\u043a\u0442.<\/p>\n\n\n\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u044a\u0442 \u043f\u043e-\u0434\u043e\u043b\u0443 \u043c\u043e\u0436\u0435\u0448 \u0434\u0430 \u0432\u0438\u0434\u0438\u0448 \u043a\u0430\u043a\u0432\u043e \u0438\u043c\u0430\u043c \u043f\u0440\u0435\u0434\u0432\u0438\u0434:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".header-large {\n   font-family:Tahoma;\n   font-weight:bold;\n   font-size:48px;\n   color:#ff0000;\n}\n\n\n\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">.header-large<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">:<\/span><span style=\"color: #79B8FF\">Tahoma<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">font-weight<\/span><span style=\"color: #E1E4E8\">:<\/span><span style=\"color: #79B8FF\">bold<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">:<\/span><span style=\"color: #79B8FF\">48<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">:<\/span><span style=\"color: #79B8FF\">#ff0000<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u0447\u0438\u0441\u0442 CSS, \u0431\u0435\u0437 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$mainFont: Tahoma;\n$mainColor: #ff0000;\n\n.header-large {\n   font-family: $mainFont;\n   font-weight: bold;\n   font-size: 48px;\n   color: $mainColor;\n}\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">$mainFont: Tahoma;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">$mainColor: <\/span><span style=\"color: #FDAEB7; font-style: italic\">#ff0000;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.header-large<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">: $mainFont;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">font-weight<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">bold<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">48<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: $mainColor;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>Sass &#8211; \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>\u041a\u0430\u043a\u0442\u043e \u043c\u043e\u0436\u0435\u0448 \u0434\u0430 \u0432\u0438\u0434\u0438\u0448, \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043d\u0435\u0442\u043e \u043d\u0430 \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438 \u0447\u0440\u0435\u0437 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440 \u043a\u0430\u0442\u043e Sass \u0438\u043b\u0438 Less \u043d\u0438 \u0434\u0430\u0432\u0430 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0442\u0430 \u0434\u0430 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u0438\u0440\u0430\u043c\u0435 \u0441\u0442\u043e\u0439\u043d\u043e\u0441\u0442 \u0438 \u0434\u0430 \u044f \u043f\u0440\u0438\u043b\u0430\u0433\u0430\u043c\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u043d\u043e \u0432 \u0446\u0435\u043b\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n\n\n\n<p>\u041a\u0430\u0437\u0430\u043d\u043e \u0441 \u043f\u043e-\u043f\u0440\u043e\u0441\u0442\u0438 \u0434\u0443\u043c\u0438: \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438 \u0441\u0438, \u0447\u0435 \u0440\u0430\u0431\u043e\u0442\u0438\u0448 \u043f\u043e front-end \u043d\u0430 \u0434\u0430\u0434\u0435\u043d \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0430 \u0444\u0438\u043d\u0430\u043b\u043d\u0430\u0442\u0430 \u043f\u0440\u0430\u0432\u0430, \u043a\u043e\u0433\u0430\u0442\u043e \u043f\u0440\u043e\u0434\u0436\u0435\u043a\u0442 \u043c\u0435\u043d\u0438\u0434\u0436\u044a\u0440\u0430 \u0438\u0434\u0432\u0430 \u0438 \u043a\u0430\u0437\u0432\u0430, \u0447\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u044a\u0442 \u0435 \u043f\u0440\u043e\u043c\u0435\u043d\u0438\u043b \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u0441\u0432\u043e\u044f\u0442\u0430 \u043c\u0430\u0440\u043a\u0430, \u0430 \u0441 \u0442\u043e\u0432\u0430 \u0438 \u0432\u0441\u0438\u0447\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438 \u0441\u0438 \u0430\u043a\u043e \u0442\u0440\u044f\u0431\u0432\u0430 \u0434\u0430 \u0441\u0435 \u0443\u0432\u0435\u0440\u0438\u0448, \u0447\u0435 \u0432\u044a\u0432 \u0432\u0441\u0438\u0447\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u0442\u0430 \u0441\u0442\u043e\u0439\u043d\u043e\u0441\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442 <code>#f2f2f2<\/code> \u043d\u0430  <code>#ff0000<\/code> \u0437\u0430 \u0441\u0438\u0432\u043e&#8230;) \u0435 \u043e\u0431\u043d\u043e\u0432\u0435\u043d\u0430 \u0438 \u043a\u043e\u0440\u0435\u0441\u043f\u043e\u043d\u0434\u0438\u0440\u0430 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0442\u0435 \u043f\u0440\u043e\u043c\u0435\u043d\u0438&#8230; \u0435 \u0434\u0430, \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e \u0435, \u043d\u043e \u0437\u0430\u0449\u043e \u0435 \u043d\u0443\u0436\u043d\u043e?<\/p>\n\n\n\n<p>\u0418 \u0437\u0430 \u0434\u0430 \u0441\u0435 \u0432\u044a\u0440\u043d\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 &#8211; \u0430\u043a\u043e \u0431\u044f\u0445\u043c\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043b\u0438 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440 \u0438 \u0431\u044f\u0445\u043c\u0435 \u0441\u044a\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0432\u0441\u0438\u0447\u043a\u0438 \u0441\u0442\u043e\u0439\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0446\u0432\u0435\u0442\u043e\u0432\u0435 \u0432 \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438, \u0442\u043e \u043e\u0431\u043d\u043e\u0432\u044f\u0432\u0430\u043d\u0435\u0442\u043e \u0438\u043c \u0449\u0435\u0448\u0435 \u0434\u0430 \u0431\u044a\u0434\u0435 \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0436\u0438\u0442\u0435\u043b\u043d\u043e \u043b\u0435\u043a\u043e \u0443\u0441\u0438\u043b\u0438\u0435.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sass \u0438 Less<\/h2>\n\n\n\n<p><strong>Sass <\/strong>\u0435 \u0430\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043e\u0442 &#8222;Syntactically Awesome Style Sheets,&#8220; \u0438 \u0441\u044a\u0432\u0441\u0435\u043c \u043e\u0442\u0433\u043e\u0432\u0430\u0440\u044f \u043d\u0430 \u0438\u043c\u0435\u0442\u043e \u0441\u0438. \u0418\u0434\u0432\u0430 \u0432 \u0434\u0432\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0442\u0438\u0447\u043d\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 &#8211; SCSS (Sassy CSS) \u0438 Sass. SCSS \u043d\u0430\u043f\u043e\u043e\u0431\u044f\u0432\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043d\u0430 \u043a\u043b\u0430\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u044f CSS, \u043f\u0440\u0430\u0432\u0440\u044a\u0449\u0430\u0439\u043a\u0438 \u0433\u043e \u0432 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u043d \u0438\u0437\u0431\u043e\u0440 \u0437\u0430\u0440\u0430\u0434\u0438 \u043f\u043b\u0430\u0432\u043d\u0438\u044f \u043f\u0440\u0435\u0445\u043e\u0434. Sass \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0430 \u0432\u044a\u0437\u043f\u0440\u0438\u0435\u043c\u0430 \u0434\u043e\u0441\u0442\u0430 \u043f\u043e-\u043e\u0442\u0434\u0430\u0434\u0435\u043d \u0438 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u0435\u043d \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441.<\/p>\n\n\n\n<p><strong>Less<\/strong>, \u0438\u043b\u0438 &#8222;Leaner Style Sheets&#8220; \u0441\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0437\u0438\u0440\u0430 \u0441 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u0430 \u043f\u0440\u0430\u0432\u0430 \u043d\u0430 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043d\u0435. \u041e\u043a\u0430\u0437\u0432\u0430 \u0441\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u043d \u0438\u0437\u0431\u043e\u0440 \u0441\u0440\u0435\u0434 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0449\u0438\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u0446\u0438 \u043d\u0435 \u0441\u0430\u043c\u043e \u0437\u0430\u0440\u0430\u0434\u0438 \u0442\u043e\u0432\u0430, \u043d\u043e \u0438 \u0437\u0430\u0440\u0430\u0434\u0438 \u043b\u0435\u0441\u043d\u0430\u0442\u0430 \u0438\u043d\u0441\u0442\u0430\u043b\u0430\u0446\u0438\u044f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0418\u043d\u0441\u0442\u0430\u043b\u0430\u0446\u0438\u044f \u0438 \u0435\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/h2>\n\n\n\n<p>\u0417\u0430 \u0434\u0430 \u0437\u0430\u043f\u043e\u0447\u043d\u0435\u0448 \u0434\u0430 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0448 Sass \u0438\u043b\u0438 Less, \u043f\u044a\u0440\u0432\u0430\u0442\u0430 \u0441\u0442\u044a\u043f\u043a\u0430 \u0435 \u0442\u044f\u0445\u043d\u0430\u0442\u0430 \u0438\u043d\u0441\u0442\u0430\u043b\u0430\u0446\u0438\u044f. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438\u0442\u0435 \u0437\u0430 \u0442\u043e\u0437\u0438 \u043f\u0440\u043e\u0446\u0435\u0441 \u0441\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u0438 \u0437\u0430 \u0432\u0441\u0435\u043a\u0438 \u043e\u0442 \u0434\u0432\u0430\u0442\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0430. \u041d\u0435\u043a\u0430 \u0433\u0438 \u0432\u0438\u0434\u0438\u043c:<\/p>\n\n\n\n<p><strong>Sass<\/strong>: \u0438\u043d\u0441\u0442\u0430\u043b\u0438\u0440\u0430\u043d\u0435\u0442\u043e \u043d\u0430 Sass \u0438\u0437\u0438\u0441\u043a\u0432\u0430 Ruby \u0434\u0430 \u0431\u044a\u0434\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u043d\u043e \u0438\u043d\u0441\u0442\u0430\u043b\u0438\u0440\u0430\u043d, \u0441\u043b\u0435\u0434 \u043a\u043e\u0435\u0442\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u044a\u0442 \u0441\u0435 \u0438\u043d\u0441\u0442\u0430\u043b\u0438\u0440\u0430 \u0447\u0440\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 (\u043a\u043e\u043d\u0437\u043e\u043b\u0430\u0442\u0430). \u0422\u043e\u0432\u0430 \u0434\u043e\u0431\u0430\u0432\u044f \u0434\u043e\u043f\u044a\u043b\u043d\u0438\u0442\u0435\u043b\u0435\u043d \u0441\u043b\u043e\u0439 \u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442 \u0438 \u0434\u043e\u0441\u0442\u0430 \u0447\u0435\u0441\u0442\u043e \u0435 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043e \u0437\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0449\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u0446\u0438. \u041c\u043e\u0436\u0435 \u0441\u044a\u0449\u043e \u0434\u0430 \u0441\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0430 \u0441 \u0434\u0440\u0443\u0433\u0438 \u0435\u0437\u0438\u0446\u0438 \u043a\u0430\u0442\u043e JavaScript, PHP \u0438 Python \u0447\u0440\u0435\u0437 libSass.<\/p>\n\n\n\n<p><strong>Less<\/strong>: \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0430, Less \u0438\u043d\u0441\u0442\u0430\u043b\u0430\u0446\u0438\u044f\u0442\u0430 \u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u043d\u043e \u043f\u043e-\u043b\u0435\u0441\u043d\u0430, \u0440\u0430\u0437\u0447\u0438\u0442\u0430\u0439\u043a\u0438 \u043d\u0430 NodeJS \u0438 \u043d\u044f\u043a\u043e\u043b\u043a\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0438 \u043e\u0442\u043d\u043e\u0432\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install -g less\n&gt; lessc styles.less styles.css\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">npm install -g less<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&gt; lessc styles.less styles.css<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u0424\u0443\u043d\u043a\u0446\u0438\u0438<\/h2>\n\n\n\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438\u0442\u0435 \u0441\u0430 \u0441\u0440\u0435\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u043d\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435, \u043c\u0430\u043a\u0430\u0440 \u0434\u0430 \u0441\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0432\u0430\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u043d\u0438 \u0440\u0430\u0437\u043b\u0438\u043a\u0438 \u0432 \u0434\u0432\u0430\u0442\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0430.<\/p>\n\n\n\n<p><strong>Sass<\/strong>: \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u0435 \u0441\u044a\u0441 \u0441\u0432\u043e\u044f\u0442\u0430 \u043e\u0431\u0448\u0438\u0440\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442 \u0432\u0433\u0440\u0430\u0434\u0435\u043d\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043e\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u0430\u043d\u0435 \u043d\u0430 \u0446\u0432\u0435\u0442\u043e\u0432\u0435 \u0434\u043e \u0438\u0437\u043f\u044a\u043b\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u0438 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0422\u043e\u0437\u0438 \u043e\u0433\u0440\u043e\u043c\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0442\u0438 \u0434\u0430\u0432\u0430 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442 \u0434\u0430 \u0441\u044a\u0437\u0434\u0430\u0432\u0430\u0448 \u0441\u043b\u043e\u0436\u043d\u0438 \u0441\u0442\u0438\u043b\u043e\u0432\u0435 \u0441 \u043f\u0440\u0435\u0446\u0438\u0437\u043d\u043e\u0441\u0442.<\/p>\n\n\n\n<p><strong>Less<\/strong>: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u043e\u0442\u0441\u0442\u044a\u043f\u0432\u0430 \u043d\u0430 Sass \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0442\u043e \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435. \u0422\u043e\u0432\u0430 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043d\u043e \u043c\u043e\u0436\u0435 \u0434\u0430 \u043f\u043e\u0432\u043b\u0438\u044f\u0435 \u043d\u0430 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0442\u0430 \u0434\u0430 \u0441\u0435 \u043f\u0438\u0448\u0430\u0442 \u043f\u043e-\u0441\u043b\u043e\u0436\u043d\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0437\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0438\u0440\u0430\u043d\u0435.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@function fibonacci($n) {\n  $sequence: 0 1;\n  @for $_ from 1 through $n {\n    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);\n    $sequence: append($sequence, $new);\n  }\n  @return nth($sequence, length($sequence));\n}\n\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F97583\">@function<\/span><span style=\"color: #79B8FF\"> <\/span><span style=\"color: #B392F0\">fibonacci(<\/span><span style=\"color: #E1E4E8\">$n<\/span><span style=\"color: #B392F0\">)<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  $sequence: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">@for <\/span><span style=\"color: #E1E4E8\">$_ <\/span><span style=\"color: #79B8FF\">from<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">through<\/span><span style=\"color: #E1E4E8\"> $n {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $new: <\/span><span style=\"color: #79B8FF\">nth<\/span><span style=\"color: #E1E4E8\">($sequence<\/span><span style=\"color: #6A737D\">,<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">length<\/span><span style=\"color: #E1E4E8\">($sequence)) <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">nth<\/span><span style=\"color: #E1E4E8\">($sequence<\/span><span style=\"color: #6A737D\">,<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">length<\/span><span style=\"color: #E1E4E8\">($sequence)<\/span><span style=\"color: #F97583\"> - <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $sequence: <\/span><span style=\"color: #79B8FF\">append<\/span><span style=\"color: #E1E4E8\">($sequence<\/span><span style=\"color: #6A737D\">,<\/span><span style=\"color: #E1E4E8\"> $new);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">@return <\/span><span style=\"color: #B392F0\">nth(<\/span><span style=\"color: #E1E4E8\">$sequence<\/span><span style=\"color: #6A737D\">,<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">length(<\/span><span style=\"color: #E1E4E8\">$sequence<\/span><span style=\"color: #B392F0\">))<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432 Sass<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@bg: black;\n@bg-light: boolean(luma(@bg) &gt; 50%);\n\ndiv {\n  background: @bg; \n  color: if(@bg-light, black, white);\n}\n\n\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">@<\/span><span style=\"color: #79B8FF\">bg<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">black<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">@<\/span><span style=\"color: #79B8FF\">bg-light<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">boolean<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">luma<\/span><span style=\"color: #E1E4E8\">(@<\/span><span style=\"color: #79B8FF\">bg<\/span><span style=\"color: #E1E4E8\">) <\/span><span style=\"color: #F97583\">&gt;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">50<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background<\/span><span style=\"color: #E1E4E8\">: @<\/span><span style=\"color: #79B8FF\">bg<\/span><span style=\"color: #E1E4E8\">; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">if<\/span><span style=\"color: #E1E4E8\">(@<\/span><span style=\"color: #79B8FF\">bg-light<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">black<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">white<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432 Less<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u041f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u0438<\/h2>\n\n\n\n<p>\u0418 Sass, \u0438 Less \u0432\u044a\u0432\u0435\u0436\u0434\u0430\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u0442\u0430 \u0437\u0430 \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u0438 \u0432 CSS, \u043a\u043e\u0435\u0442\u043e \u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0432\u0430 \u0434\u0430 \u043f\u0438\u0448\u0435\u043c \u043f\u043e-\u0447\u0438\u0441\u0442 \u0438 \u043f\u043e-\u0435\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u043a\u043e\u0434. \u0422\u0435\u0437\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0442\u043e \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043d\u0435 \u043d\u0430 \u043a\u043e\u0434\u0430 \u0438 \u0443\u043b\u0435\u0441\u043d\u044f\u0432\u0430\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u0442\u043e \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u0438 \u0441\u0442\u0438\u043b\u043e\u0432\u0435.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u041f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438<\/h4>\n\n\n\n<p>\u0421\u043f\u043e\u043c\u043d\u044f\u0448 \u0441\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441 \u043f\u0440\u043e\u043c\u044f\u043d\u0430\u0442\u0430 \u043d\u0430 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043c\u0430\u0440\u043a\u0430\u0442\u0430 \u043e\u0442 \u043f\u043e-\u0433\u043e\u0440\u0435, \u043d\u0430\u043b\u0438? \u0415, \u0432 \u0441\u043b\u0443\u0447\u0430\u044f \u0449\u044f\u0445\u043c\u0435 \u0434\u0430 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435 \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438, \u0432 \u043a\u043e\u0438\u0442\u043e \u0434\u0430 \u0437\u0430\u043f\u0430\u0437\u0438\u043c HEX \u0441\u0442\u043e\u0439\u043d\u043e\u0441\u0442\u0438\u0442\u0435 \u043d\u0430 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043d\u0438\u0442\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u0435. \u0418 \u0442\u043e\u0432\u0430 \u0449\u0435\u0448\u0435 \u0434\u0430 \u0441\u0435 \u0441\u043b\u0443\u0447\u0438 \u0447\u0440\u0435\u0437 \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438.<\/p>\n\n\n\n<p>\u0412 Less \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0430\u043c\u0435 \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438\u0442\u0435 \u0441\u044a\u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 @, \u0434\u043e\u043a\u0430\u0442\u043e \u0432 Sass \u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043c \u0441 $. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$main-color: #007bff;\n\n.button {\n  background-color: $primary-color;\n}\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">$main-color: <\/span><span style=\"color: #79B8FF\">#007bff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: $primary-color;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0430 \u0432 Sass<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@main-color: #007bff;\n\n.button {\n  background-color: @primary-color;\n}\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">@<\/span><span style=\"color: #79B8FF\">main-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#007bff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: @<\/span><span style=\"color: #79B8FF\">primary-color<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0430 \u0432 Less<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u041c\u0438\u043a\u0441\u0438\u043d\u0438 (Mixins)<\/h4>\n\n\n\n<p>\u041c\u0438\u043a\u0441\u0438\u043d\u0438\u0442\u0435 \u0441\u0430 \u0434\u0440\u0443\u0433\u0430 \u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0449\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043d\u043e\u0441\u0442, \u043a\u043e\u044f\u0442\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435 \u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442. \u041a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442? \u041d\u0430 \u043f\u0440\u043e\u0441\u0442 \u0435\u0437\u0438\u043a &#8211; \u043f\u0430\u0440\u0447\u0435\u043d\u0446\u0435 \u043a\u043e\u0434, \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u043e\u0442 \u0441\u0442\u0438\u043b\u043e\u0432\u0435, \u043a\u043e\u0438\u0442\u043e \u043c\u043e\u0436\u0435\u043c \u0434\u0430 \u043f\u043e\u0432\u0438\u043a\u0432\u0430\u043c\u0435 \u0438 \u043f\u0440\u0438\u043b\u0430\u0433\u0430\u043c\u0435 \u0437\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438.<\/p>\n\n\n\n<p>Sass \u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430 \u0441\u044a\u0437\u0434\u0430\u0432\u0430\u043d\u0435\u0442\u043e \u043d\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u0438 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u043d\u0442\u0440\u0438, \u043a\u043e\u0435\u0442\u043e \u043e\u0442 \u0441\u0432\u043e\u044f \u0441\u0442\u0440\u0430\u043d\u0430 \u043d\u0438 \u0434\u0430\u0432\u0430 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442 \u0434\u0430 \u0441\u044a\u0437\u0434\u0430\u0432\u0430\u043c\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u043e\u0432\u0435 \u0437\u0430 \u043f\u043e-\u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u0434\u043e\u043a\u0430\u0442\u043e Less \u043e\u0442\u043d\u043e\u0432\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430 \u043f\u043e-\u043f\u0440\u043e\u0441\u0442, \u043d\u043e \u0438 \u043f\u043e-\u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u0430\u0441\u0438\u043c\u0438\u043b\u0438\u0440\u0430\u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434. <\/p>\n\n\n\n<p>\u041d\u0435\u043a\u0430 \u0442\u0438 \u043f\u043e\u043a\u0430\u0436\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u043c\u0438\u043a\u0441\u0438\u043d\u0438 \u0432 \u0434\u0432\u0430\u0442\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0430:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".button {\n  @include rounded-corners(5px);\n}\n\n@mixin rounded-corners($radius) {\n  border-radius: $radius;\n}\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">.button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">@include<\/span><span style=\"color: #79B8FF\"> rounded-corners<\/span><span style=\"color: #B392F0\">(<\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #B392F0\">)<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">@mixin<\/span><span style=\"color: #79B8FF\"> <\/span><span style=\"color: #B392F0\">rounded-corners(<\/span><span style=\"color: #E1E4E8\">$radius<\/span><span style=\"color: #B392F0\">)<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: $radius;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u043c\u0438\u043a\u0441\u0438\u043d \u0432 Sass<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"\" style=\"font-size:.875rem;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".button {\n  .rounded-corners(5px);\n}\n\n.rounded-corners(@radius) {\n  border-radius: @radius;\n}\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">.button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #B392F0\">.rounded-corners<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.rounded-corners<\/span><span style=\"color: #E1E4E8\">(@<\/span><span style=\"color: #79B8FF\">radius<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: @<\/span><span style=\"color: #79B8FF\">radius<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><em>\u043c\u0438\u043a\u0441\u0438\u043d \u0432 Less<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>\u0418 \u0432 \u0434\u0432\u0430\u0442\u0430 \u0441\u043b\u0443\u0447\u0430\u044f \u0449\u0435 \u0438\u043c\u0430\u043c\u0435 \u0431\u0443\u0442\u043e\u043d \u0441\u044a\u0441 \u0437\u0430\u043e\u0431\u043b\u0435\u043d\u0438 \u043a\u0440\u0430\u0439\u0449\u0430 \u043f\u043e 5px \u043e\u0442 \u0432\u0441\u044f\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0430.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sass \u0441\u0440\u0435\u0449\u0443 Less<\/h2>\n\n\n\n<p>\u0410 \u0441\u0435\u0433\u0430 \u043d\u0435\u043a\u0430 \u0440\u0430\u0437\u0433\u043b\u0435\u0434\u0430\u043c\u0435 \u043f\u0440\u0435\u0434\u0438\u043c\u0441\u0442\u0432\u0430\u0442\u0430 \u043d\u0430 Sass \u0441\u0440\u0435\u0449\u0443 \u0442\u0435\u0437\u0438 \u043d\u0430 Less<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Sass<\/strong><\/td><td><strong>Less<\/strong><\/td><\/tr><tr><td>\u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0442\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u0438, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442 \u043f\u043e\u043b\u0435 \u0437\u0430 \u043f\u043e-\u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/td><td>\u041c\u0438\u043a\u0441\u0438\u043d\u0438, \u043f\u0440\u043e\u043c\u0435\u043d\u043b\u0438\u0432\u0438 \u0438 \u0432\u043b\u0430\u0433\u0430\u043d\u0435 \u043d\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0438 \u043d\u0438 \u0434\u0430\u0432\u0430\u0442 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442 \u0437\u0430 \u0431\u044a\u0440\u0437\u043e \u0438 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0438\u0441\u0430\u043d\u0435 \u043d\u0430 \u043a\u043e\u0434<\/td><\/tr><tr><td>\u0412\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442 \u0437\u0430 \u0438\u0437\u0431\u043e\u0440 \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 &#8211; SCSS \u0438\u043b\u0438 Sass<\/td><td>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0432\u0430\u043d\u0435\u0442\u043e \u0438 \u0434\u0435\u0431\u044a\u0433\u0432\u0430\u043d\u0435\u0442\u043e \u043d\u0430 \u043a\u043e\u0434 \u0441\u0430 \u043b\u0435\u0441\u043d\u0438 \u0437\u0430\u0440\u0430\u0434\u0438 \u0447\u0435\u0442\u0438\u043c\u0438\u044f \u0447\u0438\u0441\u0442 CSS, \u043a\u043e\u0439\u0442\u043e \u0438\u0437\u043b\u0438\u0437\u0430 \u043a\u0430\u0442\u043e \u043a\u0440\u0430\u0435\u043d \u0440\u0435\u0437\u0443\u043b\u0442\u0430\u0442<\/td><\/tr><tr><td>\u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0438\u0442\u043e \u043c\u043e\u0433\u0430\u0442 \u0434\u043e\u043f\u044a\u043b\u043d\u0438\u0442\u0435\u043b\u043d\u043e \u0434\u0430 \u0440\u0430\u0437\u0448\u0438\u0440\u044f\u0442 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438\u0442\u0435 \u043d\u0430 Sass<\/td><td>\u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0438 \u0432 \u043c\u0440\u0435\u0436\u0430\u0442\u0430, \u043e\u0441\u0432\u0435\u043d \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u043d\u0430\u0442\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u0433\u043e\u043b\u044f\u043c\u0430 \u043e\u0431\u0449\u043d\u043e\u0441\u0442<\/td><\/tr><tr><td>\u0421\u044a\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442 \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u0430\u0442\u043e Bootstrap<\/td><td>\u041b\u0435\u0441\u0435\u043d \u0437\u0430 \u0438\u043d\u0441\u0442\u0430\u043b\u0438\u0440\u0430\u043d\u0435, \u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0430\u043d\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u043d\u0430\u0443\u0447\u0430\u0432\u0430\u043d\u0435<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n\n\n\n<p>\u041a\u043e\u0433\u0430\u0442\u043e \u0442\u0440\u044f\u0431\u0432\u0430 \u0434\u0430 \u0438\u0437\u0431\u0438\u0440\u0430\u043c\u0435 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440 \u0438 \u043f\u043e-\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e: Sass \u0438\u043b\u0438 Less, \u0432\u0441\u0438\u0447\u043a\u043e \u0441\u0435 \u0441\u0432\u0435\u0436\u0434\u0430 \u0434\u043e \u0442\u043e\u0432\u0430 \u043a\u0430\u043a\u044a\u0432 \u0435 tech stack-a \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0442\u0430) \u0438 \u0441 \u043a\u043e\u0439 \u043e\u0442 \u0434\u0432\u0430\u0442\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0430 \u0441\u043c\u0435 \u043f\u043e-\u0434\u043e\u0431\u0440\u0435 \u0437\u0430\u043f\u043e\u0437\u043d\u0430\u0442\u0438. \u0417\u0430 \u0442\u0435\u0437\u0438 \u043e\u0442 \u043d\u0430\u0441, \u043a\u043e\u0438\u0442\u043e \u0438\u0441\u043a\u0430\u0442 \u043f\u043e-\u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e-\u0433\u043e\u043b\u044f\u043c \u043d\u0430\u0431\u043e\u0440 \u043e\u0442 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0437\u0430 \u043f\u0438\u0441\u0430\u043d\u0435 \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u0438, \u043d\u043e \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0437\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0438\u0440\u0430\u043d\u0435, \u043c\u043e\u0436\u0435 \u0431\u0438 Sass \u0449\u0435 \u0435 \u043f\u043e-\u0434\u043e\u0431\u0440\u043e\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u041d\u043e \u0437\u0430 \u043e\u043d\u0435\u0437\u0438 \u043e\u0442 \u043d\u0430\u0441, \u043a\u043e\u0438\u0442\u043e \u0442\u044a\u0440\u0441\u044f\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430\u0442\u0430 \u0438 \u0435\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440, \u043a\u043e\u0439\u0442\u043e \u0438\u043c\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0442 \u0432\u044a\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u0432\u0441\u0435 \u043f\u0430\u043a \u043d\u0435 \u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0430 \u0441\u0438 wizard &#8211; Less \u0435 \u043f\u043e-\u0443\u0434\u0430\u0447\u043d\u0438\u044f\u0442 \u0438\u0437\u0431\u043e\u0440.<\/p>\n\n\n\n<p>\u0410\u043a\u043e \u0442\u0435\u043f\u044a\u0440\u0432\u0430 \u0437\u0430\u043f\u043e\u0447\u0432\u0430\u0448 \u0434\u0430 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0448 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438, \u0442\u043e \u0442\u0438 \u043f\u0440\u0435\u043f\u043e\u0440\u044a\u0447\u0432\u0430\u043c \u0434\u0430 \u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0448 \u0441 Less, \u0437\u0430 \u0434\u0430 \u0443\u0441\u0432\u043e\u0438\u0448 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0442\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0441 \u043f\u043e-\u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043d\u0435 \u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043d\u0435 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440 \ud83d\ude42<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Stay blond \ud83d\ude09<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/devblondie.com\/workshop-front-end\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/05\/Figma-workshop1-1024x576.jpg\" alt=\"\" class=\"wp-image-6011\" srcset=\"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/05\/Figma-workshop1-1024x576.jpg 1024w, https:\/\/devblondie.com\/wp-content\/uploads\/2024\/05\/Figma-workshop1-300x169.jpg 300w, https:\/\/devblondie.com\/wp-content\/uploads\/2024\/05\/Figma-workshop1-768x432.jpg 768w, https:\/\/devblondie.com\/wp-content\/uploads\/2024\/05\/Figma-workshop1-1536x864.jpg 1536w, https:\/\/devblondie.com\/wp-content\/uploads\/2024\/05\/Figma-workshop1.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><a href=\"https:\/\/devblondie.com\/workshop-front-end\/\">\u0412\u043a\u043b\u044e\u0447\u0438 \u0441\u0435 \u0432 \u0438\u043d\u0442\u0435\u043d\u0437\u0438\u0432\u043d\u0438\u044f workshop, \u043f\u043e \u0432\u0440\u0435\u043c\u0435 \u043d\u0430 \u043a\u043e\u0439\u0442\u043e \u0449\u0435 \u0441\u044a\u0437\u0434\u0430\u0434\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0435\u043d \u0443\u0435\u0431 \u0441\u0430\u0439\u0442 \u043f\u043e \u043f\u043e\u0434\u0430\u0434\u0435\u043d \u0432\u044a\u0432 Figma \u0434\u0438\u0437\u0430<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0430\u0443\u0447\u0438 \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0448, \u0437\u0430 \u0434\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0448 \u043a\u043e\u0434\u0430 \u0441\u0438 \u043f\u043e-\u0435\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0430\u043d<\/p>\n","protected":false},"author":1,"featured_media":5662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[227],"tags":[],"class_list":["post-5581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end"],"blocksy_meta":[],"acf":[],"featured_image_urls_v2":{"full":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg",1200,800,false],"thumbnail":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors-150x150.jpg",150,150,true],"medium":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors-300x200.jpg",300,200,true],"medium_large":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors-768x512.jpg",768,512,true],"large":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg",1200,800,false],"2048x2048":["https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg",1200,800,false]},"post_excerpt_stackable_v2":"<p>\u041d\u0430\u0443\u0447\u0438 \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442 CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438\u0442\u0435 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0448, \u0437\u0430 \u0434\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0448 \u043a\u043e\u0434\u0430 \u0441\u0438 \u043f\u043e-\u0435\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0430\u043d<\/p>\n","category_list_v2":"<a href=\"https:\/\/devblondie.com\/category\/front-end\/\" rel=\"category tag\">\u0443\u0440\u043e\u0446\u0438 \u0438 \u0441\u0442\u0430\u0442\u0438\u0438<\/a>","author_info_v2":{"name":"Petya","url":"https:\/\/devblondie.com\/author\/petya\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &amp; Sass - \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435<\/title>\n<meta name=\"description\" content=\"CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442, \u043a\u0430\u043a \u0438 \u043a\u044a\u0434\u0435 \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442, \u0438\u043c\u0430 \u043b\u0438 \u0441\u043c\u0438\u0441\u044a\u043b \u0434\u0430 \u0433\u0438 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043c\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043a\u043e\u0434\u0430?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devblondie.com\/css-preprocessors\/\" \/>\n<meta property=\"og:locale\" content=\"bg_BG\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &amp; Sass - \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435\" \/>\n<meta property=\"og:description\" content=\"CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442, \u043a\u0430\u043a \u0438 \u043a\u044a\u0434\u0435 \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442, \u0438\u043c\u0430 \u043b\u0438 \u0441\u043c\u0438\u0441\u044a\u043b \u0434\u0430 \u0433\u0438 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043c\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043a\u043e\u0434\u0430?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devblondie.com\/css-preprocessors\/\" \/>\n<meta property=\"og:site_name\" content=\"{dev} blondie;\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-28T05:46:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-27T12:44:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Petya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Petya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u043c\u0438\u043d\u0443\u0442\u0438\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/\"},\"author\":{\"name\":\"Petya\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/#\\\/schema\\\/person\\\/74a44d3c8b9f7dc42ee4df9d0154a392\"},\"headline\":\"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &#038; Sass &#8211; \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435\",\"datePublished\":\"2024-03-28T05:46:01+00:00\",\"dateModified\":\"2024-05-27T12:44:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/\"},\"wordCount\":1077,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/#\\\/schema\\\/person\\\/74a44d3c8b9f7dc42ee4df9d0154a392\"},\"image\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/css-preprocessors.jpg\",\"articleSection\":[\"\u0443\u0440\u043e\u0446\u0438 \u0438 \u0441\u0442\u0430\u0442\u0438\u0438\"],\"inLanguage\":\"bg-BG\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/\",\"url\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/\",\"name\":\"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less & Sass - \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/css-preprocessors.jpg\",\"datePublished\":\"2024-03-28T05:46:01+00:00\",\"dateModified\":\"2024-05-27T12:44:22+00:00\",\"description\":\"CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442, \u043a\u0430\u043a \u0438 \u043a\u044a\u0434\u0435 \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442, \u0438\u043c\u0430 \u043b\u0438 \u0441\u043c\u0438\u0441\u044a\u043b \u0434\u0430 \u0433\u0438 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043c\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043a\u043e\u0434\u0430?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#breadcrumb\"},\"inLanguage\":\"bg-BG\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"bg-BG\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#primaryimage\",\"url\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/css-preprocessors.jpg\",\"contentUrl\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/css-preprocessors.jpg\",\"width\":1200,\"height\":800,\"caption\":\"css preprocessors\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/css-preprocessors\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u041d\u0430\u0447\u0430\u043b\u043e\",\"item\":\"https:\\\/\\\/devblondie.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &#038; Sass &#8211; \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/#website\",\"url\":\"https:\\\/\\\/devblondie.com\\\/\",\"name\":\"{dev} blondie;\",\"description\":\"\u0423\u0440\u043e\u0446\u0438 \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0438\u0440\u0430\u043d\u0435 \u043d\u0430 \u0447\u043e\u0432\u0435\u0448\u043a\u0438 \u0435\u0437\u0438\u043a\",\"publisher\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/#\\\/schema\\\/person\\\/74a44d3c8b9f7dc42ee4df9d0154a392\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/devblondie.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"bg-BG\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/devblondie.com\\\/#\\\/schema\\\/person\\\/74a44d3c8b9f7dc42ee4df9d0154a392\",\"name\":\"Petya\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"bg-BG\",\"@id\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/dev-blondie-logo-dark.png\",\"url\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/dev-blondie-logo-dark.png\",\"contentUrl\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/dev-blondie-logo-dark.png\",\"width\":1833,\"height\":300,\"caption\":\"Petya\"},\"logo\":{\"@id\":\"https:\\\/\\\/devblondie.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/dev-blondie-logo-dark.png\"},\"sameAs\":[\"https:\\\/\\\/devblondie.com\"],\"url\":\"https:\\\/\\\/devblondie.com\\\/author\\\/petya\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less & Sass - \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435","description":"CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442, \u043a\u0430\u043a \u0438 \u043a\u044a\u0434\u0435 \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442, \u0438\u043c\u0430 \u043b\u0438 \u0441\u043c\u0438\u0441\u044a\u043b \u0434\u0430 \u0433\u0438 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043c\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043a\u043e\u0434\u0430?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devblondie.com\/css-preprocessors\/","og_locale":"bg_BG","og_type":"article","og_title":"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less & Sass - \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435","og_description":"CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442, \u043a\u0430\u043a \u0438 \u043a\u044a\u0434\u0435 \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442, \u0438\u043c\u0430 \u043b\u0438 \u0441\u043c\u0438\u0441\u044a\u043b \u0434\u0430 \u0433\u0438 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043c\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043a\u043e\u0434\u0430?","og_url":"https:\/\/devblondie.com\/css-preprocessors\/","og_site_name":"{dev} blondie;","article_published_time":"2024-03-28T05:46:01+00:00","article_modified_time":"2024-05-27T12:44:22+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg","type":"image\/jpeg"}],"author":"Petya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Petya","Est. reading time":"7 \u043c\u0438\u043d\u0443\u0442\u0438"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/devblondie.com\/css-preprocessors\/#article","isPartOf":{"@id":"https:\/\/devblondie.com\/css-preprocessors\/"},"author":{"name":"Petya","@id":"https:\/\/devblondie.com\/#\/schema\/person\/74a44d3c8b9f7dc42ee4df9d0154a392"},"headline":"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &#038; Sass &#8211; \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435","datePublished":"2024-03-28T05:46:01+00:00","dateModified":"2024-05-27T12:44:22+00:00","mainEntityOfPage":{"@id":"https:\/\/devblondie.com\/css-preprocessors\/"},"wordCount":1077,"commentCount":0,"publisher":{"@id":"https:\/\/devblondie.com\/#\/schema\/person\/74a44d3c8b9f7dc42ee4df9d0154a392"},"image":{"@id":"https:\/\/devblondie.com\/css-preprocessors\/#primaryimage"},"thumbnailUrl":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg","articleSection":["\u0443\u0440\u043e\u0446\u0438 \u0438 \u0441\u0442\u0430\u0442\u0438\u0438"],"inLanguage":"bg-BG","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devblondie.com\/css-preprocessors\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devblondie.com\/css-preprocessors\/","url":"https:\/\/devblondie.com\/css-preprocessors\/","name":"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less & Sass - \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435","isPartOf":{"@id":"https:\/\/devblondie.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devblondie.com\/css-preprocessors\/#primaryimage"},"image":{"@id":"https:\/\/devblondie.com\/css-preprocessors\/#primaryimage"},"thumbnailUrl":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg","datePublished":"2024-03-28T05:46:01+00:00","dateModified":"2024-05-27T12:44:22+00:00","description":"CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438 - \u043a\u0430\u043a\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0432\u0430\u0442, \u043a\u0430\u043a \u0438 \u043a\u044a\u0434\u0435 \u0441\u0435 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u0442, \u0438\u043c\u0430 \u043b\u0438 \u0441\u043c\u0438\u0441\u044a\u043b \u0434\u0430 \u0433\u0438 \u0438\u0437\u0443\u0447\u0430\u0432\u0430\u043c\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043e\u0431\u0440\u044f\u0432\u0430\u0442 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0442\u0430 \u043d\u0430 \u043a\u043e\u0434\u0430?","breadcrumb":{"@id":"https:\/\/devblondie.com\/css-preprocessors\/#breadcrumb"},"inLanguage":"bg-BG","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devblondie.com\/css-preprocessors\/"]}]},{"@type":"ImageObject","inLanguage":"bg-BG","@id":"https:\/\/devblondie.com\/css-preprocessors\/#primaryimage","url":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg","contentUrl":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/03\/css-preprocessors.jpg","width":1200,"height":800,"caption":"css preprocessors"},{"@type":"BreadcrumbList","@id":"https:\/\/devblondie.com\/css-preprocessors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u041d\u0430\u0447\u0430\u043b\u043e","item":"https:\/\/devblondie.com\/"},{"@type":"ListItem","position":2,"name":"\u2764\ufe0f CSS \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u043e\u0440\u0438: Less &#038; Sass &#8211; \u043a\u0430\u043a\u0432\u043e \u0441\u0430 \u0438 \u043a\u0430\u043a \u0434\u0430 \u0433\u0438 \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043c\u0435"}]},{"@type":"WebSite","@id":"https:\/\/devblondie.com\/#website","url":"https:\/\/devblondie.com\/","name":"{dev} blondie;","description":"\u0423\u0440\u043e\u0446\u0438 \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0438\u0440\u0430\u043d\u0435 \u043d\u0430 \u0447\u043e\u0432\u0435\u0448\u043a\u0438 \u0435\u0437\u0438\u043a","publisher":{"@id":"https:\/\/devblondie.com\/#\/schema\/person\/74a44d3c8b9f7dc42ee4df9d0154a392"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devblondie.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"bg-BG"},{"@type":["Person","Organization"],"@id":"https:\/\/devblondie.com\/#\/schema\/person\/74a44d3c8b9f7dc42ee4df9d0154a392","name":"Petya","image":{"@type":"ImageObject","inLanguage":"bg-BG","@id":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/07\/dev-blondie-logo-dark.png","url":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/07\/dev-blondie-logo-dark.png","contentUrl":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/07\/dev-blondie-logo-dark.png","width":1833,"height":300,"caption":"Petya"},"logo":{"@id":"https:\/\/devblondie.com\/wp-content\/uploads\/2024\/07\/dev-blondie-logo-dark.png"},"sameAs":["https:\/\/devblondie.com"],"url":"https:\/\/devblondie.com\/author\/petya\/"}]}},"_links":{"self":[{"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/posts\/5581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/comments?post=5581"}],"version-history":[{"count":0,"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/posts\/5581\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/media\/5662"}],"wp:attachment":[{"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/media?parent=5581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/categories?post=5581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblondie.com\/wp-json\/wp\/v2\/tags?post=5581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}