{"id":346,"date":"2021-03-03T21:20:14","date_gmt":"2021-03-03T18:20:14","guid":{"rendered":"https:\/\/webcademy.ru\/blog\/?p=346"},"modified":"2022-04-21T18:33:32","modified_gmt":"2022-04-21T15:33:32","slug":"%d0%b8%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%bf%d0%be-scss","status":"publish","type":"post","link":"https:\/\/webcademy.ru\/blog\/346\/","title":{"rendered":"\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e SCSS"},"content":{"rendered":"\n<p><strong>SCSS<\/strong> &#8212; \u044d\u0442\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f CSS \u043a\u043e\u0434\u0430. SCSS \u0434\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u0421 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d, \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u0440\u043e\u0441\u0442\u044f\u0442 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 CSS \u043a\u043e\u0434\u043e\u043c. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e SCSS. \u041e \u0435\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0438 \u0441 Sass \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 SCSS<\/h2>\n\n\n\n<p>SCSS \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430. \u041e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 CSS, \u043d\u043e \u0432 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439. \u0411\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e SCSS \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a Super CSS &#8212; \u0442\u043e \u0435\u0441\u0442\u044c CSS c \u0441\u0443\u043f\u0435\u0440-\u0441\u0438\u043b\u043e\u0439.<\/p>\n\n\n\n<p>SCSS \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.scss<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>main.scss<\/code>.<\/p>\n\n\n\n<p>SCSS \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u0441 \u043d\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. SCSS \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f) \u0432 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 CSS \u043a\u043e\u0434, \u0438 \u0443\u0436\u0435 CSS \u0444\u0430\u0439\u043b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c SCSS \u0432 CSS \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430: Koala, Prepros, \u0438\u043b\u0438  \u0434\u0440\u0443\u0433\u0430\u044f. \u041b\u0438\u0431\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430. \u0418\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430: Gulp, Webpack \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439. <\/p>\n\n\n\n<p>\u041d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c SCSS \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u043c\u0438, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 Koala, \u044f \u0432\u0438\u0436\u0443 \u044d\u0442\u043e \u043a\u0430\u043a \u043b\u0443\u0447\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430. \u0422\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u0440\u043e\u0441\u0442\u044b \u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 &#8212; \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043c\u043e\u0433\u0443 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438. \u0421\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 Gulp \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 &#8212; \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0440\u044f\u0434\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 (npm , node js).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 SCSS<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u042d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430<\/li><li>\u041f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.scss<\/code><\/li><li>SCSS \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e<\/li><li>SCSS \u043d\u0430\u0434\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 CSS <\/li><li>\u0414\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d, \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 CSS \u043a\u043e\u0434\u043e\u043c<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u041e\u0442\u043b\u0438\u0447\u0438\u0435 Sass \u043e\u0442 SCSS<\/h3>\n\n\n\n<p>Sass \u0438 SCSS \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438, \u043d\u043e \u0432 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439. Sass \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u0441 \u0437\u0430\u043f\u044f\u0442\u043e\u0439 \u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0432 Sass \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 SCSS \u043a\u043e\u0434\u0430:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">body {\n    font-family: sans-serif;\n    font-size: 18px;\n}<\/pre><\/div>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 Sass \u043a\u043e\u0434\u0430:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">body \n    font-family: sans-serif\n    font-size: 18px<\/pre><\/div>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c SCSS \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Windows \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Koala<\/h2>\n\n\n\n<p>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 Koala \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f SCSS \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0440\u0443\u0441\u0441\u043a\u0438\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0443\u0442\u0438 \u043a \u0438\u043c\u0435\u043d\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u043f\u0443\u0442\u044c \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 <code>C:\/Users\/\u042e\u0440\u0438\u0439\/\u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0441\u0442\u043e\u043b\/html-project<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043f\u0443\u0442\u0438 \u0435\u0441\u0442\u044c \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0430. \u0427\u0442\u043e\u0431\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0441\u0442\u043e\u0438\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 UTF \u0432 Windows. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n\n\n\n<p><strong>\u0412 Windows 10:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/li><li>\u0412\u0440\u0435\u043c\u044f \u0438 \u044f\u0437\u044b\u043a<\/li><li>\u0441\u043b\u0435\u0432\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u042f\u0437\u044b\u043a&#187;<\/li><li>\u0441\u043f\u0440\u0430\u0432\u0430 \u0410\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/li><li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e&#187;<\/li><li>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044f\u0437\u044b\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/li><li>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0433\u0430\u043b\u043e\u0447\u043a\u0443: &#171;\u0411\u0435\u0442\u0430-\u0432\u0435\u0440\u0441\u0438\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c UTF-8.&#187; <\/li><li>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u041e\u041a, \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u0441\u044f, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u041a\u043e\u0430\u043b\u0443 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/li><\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-style-danger is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! <\/strong>\u0414\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0432\u043b\u0435\u0447\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445. <\/p><cite>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438 \u0435\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f Open Server. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0435\u0435 \u0438\u043b\u0438 \u043d\u0435\u0442, \u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0430\u043c. <strong>\u041c\u043e\u0439 \u0441\u043e\u0432\u0435\u0442 &#8212; \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c. <\/strong>\u041f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u043f\u0443\u0442\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0431\u044b\u043b\u0438 \u043d\u0430 \u043b\u0430\u0442\u0438\u043d\u0438\u0446\u0435.<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f SCSS<\/h2>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c SCSS \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043e\u0439 Koala. \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0435\u0435 \u043c\u043e\u0436\u043d\u043e <a rel=\"noreferrer noopener\" href=\"http:\/\/koala-app.com\/\" target=\"_blank\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u041e\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u0438 \u0443\u043c\u0435\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e SASS\/SCSS, \u043d\u043e \u0438 Less c CofeeScript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-1024x590.png\" alt=\"\" class=\"wp-image-354\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-1024x590.png 1024w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-300x173.png 300w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-768x443.png 768w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-694x400.png 694w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image.png 1032w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><meta itemprop=\"width\" content=\"1024\"><meta itemprop=\"height\" content=\"590\"><\/span><figcaption>\u0421\u0430\u0439\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Koala  <\/figcaption><\/figure>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c SCSS \u0444\u0430\u0439\u043b \u0438 \u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u043c SCSS \u043a\u043e\u0434. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439:<\/p>\n\n\n\n<p>\u041f\u0440\u043e\u0435\u043a\u0442: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"250\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-2.png\" alt=\"\" class=\"wp-image-359\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-2.png 583w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-2-300x129.png 300w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><meta itemprop=\"width\" content=\"583\"><meta itemprop=\"height\" content=\"250\"><\/span><figcaption>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/figure>\n\n\n\n<p>\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0430\u043f\u043a\u0443 <code>sass<\/code>, \u0447\u0442\u043e\u0431\u044b Koala \u0434\u043b\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e <code>.css<\/code> \u0444\u0430\u0439\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e <code>css<\/code> \u043f\u0430\u043f\u043a\u0443 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041e\u043d\u0430 \u0443\u043c\u0435\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u043f\u0430\u043f\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0438\u043c\u044f <code>sass<\/code>, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 <code>.scss<\/code> \u0444\u0430\u0439\u043b\u044b.<\/p>\n\n\n\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 main.scss<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">$mainColor: red;\n\nbody {\n    font-size: 18px;\n    color: $mainColor;\n}<\/pre><\/div>\n\n\n\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>$mainColor<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>red<\/code>. <br>\u0412 <code>body<\/code> \u044d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0437\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 Koala, \u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0430\u0448\u043b\u0430 \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438 \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u043e \u0443\u0441\u043f\u0435\u0445\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"556\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-3.png\" alt=\"\" class=\"wp-image-360\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-3.png 900w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-3-300x185.png 300w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-3-768x474.png 768w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-3-647x400.png 647w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><meta itemprop=\"width\" content=\"900\"><meta itemprop=\"height\" content=\"556\"><\/span><\/figure>\n\n\n\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0435\u0449\u0435 \u0440\u0430\u0437. \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043d\u0435\u043c \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0430\u043f\u043a\u0430 CSS c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c main.css \u0444\u0430\u0439\u043b\u043e\u043c.<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"313\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-4.png\" alt=\"\" class=\"wp-image-361\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-4.png 586w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-4-300x160.png 300w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><meta itemprop=\"width\" content=\"586\"><meta itemprop=\"height\" content=\"313\"><\/span><\/figure>\n\n\n\n<p>\u041a\u043e\u0434 main.css \u0444\u0430\u0439\u043b\u0430:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">body {\n  font-size: 18px;\n  color: red; }\n\n\/*# sourceMappingURL=main.css.map *\/<\/pre><\/div>\n\n\n\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e! \u041c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0438 SCSS!)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Koala<\/h2>\n\n\n\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"245\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-5.png\" alt=\"\" class=\"wp-image-362\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-5.png 559w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-5-300x131.png 300w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><meta itemprop=\"width\" content=\"559\"><meta itemprop=\"height\" content=\"245\"><\/span><figcaption>\u0417\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Koala<\/figcaption><\/figure>\n\n\n\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong> <\/p>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0435\u0441\u0442\u044c \u0438 \u0420\u0443\u0441\u0441\u043a\u0438\u0439. \u041e\u043f\u0446\u0438\u0438 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0432 \u0442\u0440\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0442\u0430\u0441\u043a\u0431\u0430\u0440\u0435, \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0444\u0430\u0439\u043b\u043e\u0432 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f, \u043d\u043e \u0431\u0443\u0434\u044c\u0442\u0435 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b \u0441 \u0442\u0440\u0435\u0435\u043c, \u043f\u0440\u0438 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 \u0438\u043a\u043e\u043d\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0443\u043b\u0435\u0442\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e, \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430, \u043d\u043e \u043e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u0440\u044f\u0442\u0430\u043b\u0430\u0441\u044c.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"556\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-7.png\" alt=\"\" class=\"wp-image-364\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-7.png 900w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-7-300x185.png 300w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-7-768x474.png 768w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-7-647x400.png 647w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><meta itemprop=\"width\" content=\"900\"><meta itemprop=\"height\" content=\"556\"><\/span><figcaption>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Koala<\/figcaption><\/figure>\n\n\n\n<p><strong>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u0434\u0435\u043c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f SASS<\/strong><\/p>\n\n\n\n<p>Compass mode \u043d\u0443\u0436\u0435\u043d \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Compass, \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043e\u043d\u0438 \u0432\u0430\u043c \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c. <\/p>\n\n\n\n<p>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c Source Map (\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u044b), \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u043c .scss \u0444\u0430\u0439\u043b\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u043e\u043f\u0438\u0441\u0430\u043d \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 CSS. \u0423\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n\n\n\n<p>\u0415\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c Autoprefix \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f, <code>&gt; 1%<\/code>. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c 99% \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u0435\u0433\u043e <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/postcss\/autoprefixer\" target=\"_blank\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/a> \u0432 GitHub, \u043d\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u0445\u0432\u0430\u0442\u0438\u0442 \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441 \u043d\u0438\u043c \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"556\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-8.png\" alt=\"\" class=\"wp-image-365\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-8.png 900w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-8-300x185.png 300w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-8-768x474.png 768w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-8-647x400.png 647w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><meta itemprop=\"width\" content=\"900\"><meta itemprop=\"height\" content=\"556\"><\/span><figcaption>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 SASS \u0432 Koala<\/figcaption><\/figure>\n\n\n\n<p>\u0421\u0442\u0438\u043b\u044c \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 4 \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"98\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-10.png\" alt=\"\" class=\"wp-image-368\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-10.png 570w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-10-300x52.png 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><meta itemprop=\"width\" content=\"570\"><meta itemprop=\"height\" content=\"98\"><\/span><\/figure>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0439 CSS \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435, \u0442\u043e \u044d\u0442\u043e expanded. Nested \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0436\u0430\u0442\u044b\u0439 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0438\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f CSS, compact &#8212; \u0432\u044b\u0442\u044f\u043d\u0443\u0442\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043e\u0434\u0443 \u0441\u0442\u0440\u043e\u043a\u0443, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0441 \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438. Compressed- \u0441\u0436\u0430\u0442\u044b\u0439, \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u0438\u0434 CSS, \u043a\u043e\u0433\u0434\u0430 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0444\u0430\u0439\u043b\u0430 \u0432\u044b\u0442\u044f\u043d\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443, \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0432\u0441\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438. <\/p>\n\n\n\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043b\u0438\u0431\u043e \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c expanded c \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c\u0438 &#171;\u0441\u043e\u0440\u0441-\u043c\u0430\u043f\u0430\u043c\u0438&#187; \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043b\u0438\u0431\u043e compressed c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c source maps \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u0436\u0430\u0442\u044b\u0439 CSS \u0444\u0430\u0439\u043b \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0432\u0435\u0441\u0430.<\/p>\n\n\n\n<p><strong>\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432<\/strong><\/p>\n\n\n\n<p>\u0415\u0449\u0435 \u0432 Koala \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0432 \u043f\u043e \u043d\u0435\u043c\u0443. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0432\u043e\u0442 \u0442\u0430\u043a: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"556\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-9.png\" alt=\"\" class=\"wp-image-367\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-9.png 900w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-9-300x185.png 300w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-9-768x474.png 768w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-9-647x400.png 647w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><meta itemprop=\"width\" content=\"900\"><meta itemprop=\"height\" content=\"556\"><\/span><figcaption>\u041f\u0440\u0430\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c &#8212; \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 Koala<\/figcaption><\/figure>\n\n\n\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u0438 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0435\u043c \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b &#8212; \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0433\u0430\u043b\u043e\u0447\u043a\u0438 \u0430\u0432\u0442\u043e\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0434\u043b\u044f \u0442\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0418 \u0435\u0449\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 Compile, \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n\n\n\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438. \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f SCSS \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 SCSS<\/h2>\n\n\n\n<p>SCSS \u0438\u043c\u0435\u0435\u0442 \u043c\u0430\u0441\u0441\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u043e\u0434\u0435 \u044d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \ud83d\ude42 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u043d\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0446\u0438\u043a\u043b\u044b \u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f. \u041d\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u044b \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041e \u043d\u0438\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c.<\/p>\n\n\n\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 SCSS \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432<\/li><li>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/li><li>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u043c\u043f\u043e\u0440\u0442 \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n\n\n\n<p>\u0412 SCSS \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438. \u0412\u043e\u0442 \u0442\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"594\" height=\"349\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-13.png\" alt=\"\" class=\"wp-image-374\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-13.png 594w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/03\/image-13-300x176.png 300w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><meta itemprop=\"width\" content=\"594\"><meta itemprop=\"height\" content=\"349\"><\/span><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/figcaption><\/figure>\n\n\n\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 sass \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<br><code>base\/_vars.scss<\/code> \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 (\u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 variables),<br><code>base\/_base.scss<\/code> \u2014 \u0441\u0431\u0440\u043e\u0441\u044b, \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u044b \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/p>\n\n\n\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 blocks \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u043e\u0434 \u0441\u0435\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0431\u043b\u043e\u043a\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430: header, main, footer.<\/p>\n\n\n\n<p>\u0418\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u044d\u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u0438\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422\u0430\u043a \u043e\u043d \u043f\u043e\u0439\u043c\u0435 \u0447\u0442\u043e \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0430 \u0447\u0430\u0441\u0442\u044c\u044e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 SASS.  <\/p>\n\n\n\n<p>\u0418\u043c\u043f\u043e\u0440\u0442 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">\/\/ Base\n@import &quot;.\/base\/vars&quot;;\n@import &quot;.\/base\/base&quot;;\n\n\/\/ Header\n@import &quot;.\/blocks\/header&quot;;\n@import &quot;.\/blocks\/main&quot;;\n@import &quot;.\/blocks\/footer&quot;;\n<\/pre><\/div>\n\n\n\n<p>\u0412 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043e\u043f\u0443\u0449\u0435\u043d\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430, \u0438 \u043e\u043f\u0443\u0449\u0435\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. SASS \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442 <code>_<\/code> \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0444\u0430\u0439\u043b\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.scss<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c.<\/p>\n\n\n\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u044b scss \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 scss \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0441\u043e \u0432\u0441\u0435\u043c \u043a\u043e\u0434\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0432 \u043d\u0435\u0433\u043e.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 scss \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442 .css \u0444\u0430\u0439\u043b\u043e\u0432, \u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 css \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 SCSS \u0438 CSS \u0444\u0430\u0439\u043b\u0430:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">@import &quot;.\/example.css&quot;;\n@import &quot;.\/base.scss&quot;;<\/pre><\/div>\n\n\n\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 CSS:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url(.\/example.css);\nbody {\n  font-size: 18px;\n  color: red;\n}<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 SCSS<\/h3>\n\n\n\n<p>\u0412 SCSS \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0434\u0432\u0443\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 CSS \u0441\u0442\u0438\u043b\u0435 <code>\/* \u0422\u0435\u043a\u0441\u0442 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f *\/<\/code> &#8212; \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0435 \u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 CSS \u043a\u043e\u0434. \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441 <code>\/\/<\/code> &#8212; \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0435, \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 CSS, \u043e\u043d\u0438 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 <code>.scss<\/code> \u0444\u0430\u0439\u043b\u0435<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">\/* \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0432 CSS *\/\n\/\/ \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 SCSS<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 SCSS<\/h3>\n\n\n\n<p>\u0412 SCSS \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0447\u0435\u0440\u0435\u0437 \u0438\u043c\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0435\u0435\u0441\u044f \u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 <code>$<\/code>, \u0438 \u043f\u043e\u0441\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0432 \u0438\u043c\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0442\u0430\u043c \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">$mainColor: red;\n\nbody {\n    font-size: 18px;\n    color: $mainColor;\n}<\/pre><\/div>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u043e \u0434\u043b\u044f \u043d\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>_vars.scss<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043d\u0438\u043c \u0431\u044b\u043b \u0443\u043a\u0430\u0437\u0430\u043d \u0432\u044b\u0448\u0435.<\/p>\n\n\n\n<p>\u0421\u0442\u043e\u0438\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 scss \u0438\u043c\u0435\u044e\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0438 \u0435\u0441\u043b\u0438 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u0430 \u043d\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f. <\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440. \u042d\u0442\u043e\u0442 SCSS \u043a\u043e\u0434:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">\/\/ \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f $mainColor \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 red\n$mainColor: red; \n\nbody {\n  \t\/\/ \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \n \t\/\/ \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 body \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u0443\u044e $mainColor \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 green\n    $mainColor: green;\n    color: $mainColor;\n}\n<\/pre><\/div>\n\n\n\n<p>\u0414\u0430\u0441\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">body {\n  color: green; \/* \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u0438\u0434\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 green *\/\n}<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/h3>\n\n\n\n<p>SCSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0411\u042d\u041c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">.header {\n    font-size: 18px;\n\t\/\/ \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0411\u042d\u041c, \u0434\u0430\u0441\u0442 \u043d\u0430\u043c .header__title\n    &amp;__title {\n        font-size: 32px;\n    }\n\t\/\/ \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 .header .nav\n    .nav {\n        font-size: 22px;\n    }\n\t\/\/ \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441, \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 .header\n    @media (max-width: 1199px) {\n        font-size: 16px;\n    }\n}<\/pre><\/div>\n\n\n\n<p>\u0412 CSS \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.header {\n  font-size: 18px;\n}\n\n.header__title {\n  font-size: 32px;\n}\n\n.header .nav {\n  font-size: 22px;\n}\n\n@media (max-width: 1199px) {\n  .header {\n    font-size: 16px;\n  }\n}<\/pre><\/div>\n\n\n\n<p><strong>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u0441\u0435\u0432\u0434\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>before<\/code> \u0438 <code>after<\/code>:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">.title {\n    font-size: 22px;\n    &amp;::before {\n        content: &quot;\u2014&quot;;\n    }\n    &amp;::after {\n        content: &quot;\u2014&quot;;\n    }\n}<\/pre><\/div>\n\n\n\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 CSS:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.title {\n  font-size: 22px;\n}\n.title::before {\n  content: &quot;\u2014&quot;;\n}\n.title::after {\n  content: &quot;\u2014&quot;;\n}<\/pre><\/div>\n\n\n\n<p><strong>\u0423\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u0438\u043c\u0432\u043e\u043b <code>&amp;<\/code><\/strong><\/p>\n\n\n\n<p>\u041f\u043e\u0434 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c <code>&amp;<\/code> \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f BEM naming \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u043a, \u043d\u043e \u0438 \u0434\u043b\u044f \u0446\u0435\u043f\u043e\u0447\u0435\u043a \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/x-scss&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;SCSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;scss&quot;}\">.card {\n    font-size: 18px;\n\n    .main &amp; {\n        font-size: 16px;\n    }\n}<\/pre><\/div>\n\n\n\n<p>\u0412 CSS \u0431\u0443\u0434\u0435\u0442:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.card {\n  font-size: 18px;\n}\n.main .card {\n  font-size: 16px;\n}<\/pre><\/div>\n\n\n\n<p><strong>\u0414\u0440\u0443\u0433\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 SCSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u041c\u0438\u043a\u0441\u0438\u043d\u044b<\/li><li>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/li><li>\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438<\/li><\/ul>\n\n\n\n<p>\u0414\u0440\u0443\u0433\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a rel=\"noreferrer noopener\" href=\"https:\/\/sass-scss.ru\/guide\/\" target=\"_blank\">\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u043f\u043e SCSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h2>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0435\u0441\u044c \u0441 \u0442\u0435\u043c \u0447\u0442\u043e Koala \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445, \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u0432 \u043f\u0443\u0442\u0438 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u043d\u0435 \u0431\u044b\u043b\u043e \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041f\u0443\u0442\u044c \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u0434\u0438\u0441\u043a\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 \u043b\u0430\u0442\u0438\u043d\u0438\u0446\u0435, \u0432\u043a\u043b\u0431\u0447\u0430\u044f \u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0441\u0442\u043e\u043b\u0435.<\/p>\n\n\n\n<p>\u0422\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442: <code>C:\\Users\\\u042e\u0440\u0438\u0439\\Desktop\\forest-travel<\/code><br>\u0422\u0430\u043a\u043e\u0439 \u043f\u0443\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c: <code>C:\\Users\\yurij\\Desktop\\forest-travel<\/code><\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 Windows \u0443 \u0432\u0430\u0441 \u043d\u0430 \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0435, \u0442\u043e\u0433\u0434\u0430 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u0438\u043b\u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043d\u0430 \u043a\u0430\u043a\u043e\u043c-\u043b\u0438\u0431\u043e \u0434\u0438\u0441\u043a\u0435, \u0438\u0437\u0431\u0435\u0433\u0430\u044f \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0441\u0442\u043e\u043b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <code>C:\\projects\\forest-travel<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/sass-lang.com\/\" target=\"_blank\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f SASS<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/sass-scss.ru\/\" target=\"_blank\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f SASS \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/koala-app.com\/\" target=\"_blank\">\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 Koala<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SCSS &#8212; \u044d\u0442\u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f CSS \u043a\u043e\u0434\u0430. SCSS \u0434\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u0421 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d, \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u0440\u043e\u0441\u0442\u044f\u0442 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 CSS \u043a\u043e\u0434\u043e\u043c. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e SCSS. \u041e \u0435\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0438 \u0441 Sass \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u043d\u043e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-346","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-html"],"_links":{"self":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/346"}],"collection":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/comments?post=346"}],"version-history":[{"count":0,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/346\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/media?parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/categories?post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/tags?post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}