{"id":6824,"date":"2020-08-01T14:45:32","date_gmt":"2020-08-01T10:15:32","guid":{"rendered":"https:\/\/maktabkhooneh.org\/mag\/?p=6824"},"modified":"2026-04-06T22:47:10","modified_gmt":"2026-04-06T19:17:10","slug":"learn-sass-in-simple-language","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/learn-sass-in-simple-language\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 sass \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0686\u0631\u0627 \u0628\u0647 \u0622\u0645\u0648\u0632\u0634 sass \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645<\/span><\/h2>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">Sass \u06cc\u06a9 \u067e\u06cc\u0634\u200c\u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 \u06cc\u0627 \u0627\u0635\u0637\u0644\u0627\u062d\u0627 preproccesor \u0628\u0631\u0627\u06cc css \u0627\u0633\u062a. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 sass \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0648\u0627\u0628\u0639\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0648 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627 \u0648 \u0636\u0639\u0641 \u0647\u0627\u06cc css \u0648 \u062a\u06a9\u0631\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f \u062f\u0631 css \u0631\u0627 \u0631\u0641\u0639 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u0627 \u062f\u0648 \u0646\u0648\u0639 \u067e\u06cc\u0634 \u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc css \u062f\u0627\u0631\u06cc\u0645 \u0628\u0647 \u0646\u0627\u0645\u200c\u0647\u0627\u06cc sass \u0648 less. Sass \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u0648 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u067e\u06cc\u0634 \u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc css \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0645\u0627 \u0646\u06cc\u0632 \u062f\u0631 <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-sass-in-simple-language\/\"><strong>\u0622\u0645\u0648\u0632\u0634 sass<\/strong><\/a> \u0628\u0647 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/front_gcZ5ulR_1403-08-16-164827889\/eb15a124ff8961e6f5a4178684ece70c.webp?expire=4893471932&#038;token=0416681717d9beb623a1202e6efcac1b&#038;md5=BBZoFxfZvrYjoSAubvysGw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f9\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f4\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f4\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 sass \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u062a\u0627 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 sass \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc sass \u0627\u0632 \u062f\u0648 \u067e\u0633\u0648\u0646\u062f scss \u0648 sass \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062a\u0646\u0647\u0627 \u062a\u0641\u0627\u0648\u062a \u062f\u0631 \u0627\u06cc\u0646 \u062f\u0648 \u062f\u0631 \u0646\u0648\u0639 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0622\u0646 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u0648 \u0627\u06cc\u0646 \u06a9\u0627\u0645\u0644\u0627 \u0628\u0633\u062a\u06af\u06cc \u0628\u0647 \u0646\u0648\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0645\u0627 \u062f\u0627\u0631\u062f. sass \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0631\u0648\u0628\u06cc &nbsp;\u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0646\u0635\u0628 sass<\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 sass \u0628\u0647 \u0633\u0627\u06cc\u062a \u0622\u0646 \u0628\u0647 \u0622\u062f\u0631\u0633 <a style=\"color: #000000;\" href=\"https:\/\/sass-lang.com\/install\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/sass-lang.com\/install<\/a> \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0646\u0648\u0627\u0639 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0646\u0635\u0628 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 sass \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u067e\u06a9\u06cc\u062c npm \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0631\u0648\u0634 \u0646\u0635\u0628 \u0627\u0632 \u0637\u0631\u06cc\u0642 npm \u0646\u0635\u0628 sass \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0622\u062f\u0631\u0633 github \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0633\u0627\u06cc\u062a \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0641\u0627\u06cc\u0644 sass \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644\u062a\u0627\u0646 \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u062a\u0627 \u0641\u0627\u06cc\u0644 sass \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0648\u0644\u062f\u0631 \u062f\u0627\u0646\u0644\u0648\u062f \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0622\u062f\u0631\u0633 path \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0647\u06cc\u0686 \u0646\u0635\u0628 \u0627\u0636\u0627\u0641\u0647\u200c\u0627\u06cc \u0648 \u06cc\u0627 \u067e\u06a9\u06cc\u062c \u062f\u06cc\u06af\u0631\u06cc \u0646\u06cc\u0627\u0632 \u0646\u0645\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0641\u0631\u0622\u0646\u06cc\u062f \u0631\u0627 \u0637\u06cc \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 sass \u2013version \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u0631\u0698\u0646 sass \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062c\u0647\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 sass \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0641\u0627\u06cc\u0644 sass \u0628\u0647 css\u060c \u0645\u0627 \u0627\u0632 \u0631\u0648\u0634 command line \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0645\u062d\u0644\u06cc \u06a9\u0647 \u0641\u0627\u06cc\u0644sass \u0628\u0627 \u0641\u0631\u0645\u062a scss \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0645\u062d\u0644\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0641\u0627\u06cc\u0644 css \u0633\u0627\u062e\u062a\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">sass source\/stylesheets\/index.scss <\/span><\/p>\n\n\n\n<p><span style=\"font-size: 16px;\">build\/stylesheets\/index.css<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0641\u0627\u06cc\u0644 css \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0627\u06cc\u0644sass \u0628\u0627 \u0641\u0631\u0645\u062a scss \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0627\u0632 \u0641\u0627\u06cc\u0644 css \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062c\u0647\u062a \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627\u06cc html \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u062a\u0627\u0628\u0639 debug<\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062f\u0648\u0646 \u062a\u0648\u0644\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 css\u060c \u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0632 \u0627\u0633\u0645 \u062a\u0627\u0628\u0639 \u0645\u0634\u062e\u0635 \u0627\u0633\u062a\u060c \u062c\u0647\u062a \u062f\u06cc\u0628\u0627\u06af \u06a9\u0631\u062f\u0646 \u06a9\u0631\u062f \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0631\u0648\u060c \u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin inset-divider-offset($offset, $padding) {\n  $divider-offset: (2 * $padding) + $offset;\n  @debug \"divider offset: #{$divider-offset}\";\n\n  margin-left: $divider-offset;\n  width: calc(100% - #{$divider-offset});\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">test.scss:3 Debug: divider offset: 132px<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 \u0622\u0645\u0648\u0632\u0634 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 sass \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0646\u0648\u0627\u0639 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">\u0631\u0634\u062a\u0647\u200c\u0647\u0627<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">\u0627\u0639\u062f\u0627\u062f<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">\u0631\u0646\u06af\u200c\u0647\u0627<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">\u0628\u0648\u0644\u06cc\u0646\u200c\u0647\u0627<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">\u0644\u06cc\u0633\u062a\u200c\u0647\u0627<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">\u062a\u0647\u06cc\u200c\u0647\u0627<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 sass \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u0646\u0627\u0645 \u0645\u062a\u063a\u06cc\u0631 \u0627\u0632 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0646\u0645\u0627\u062f $ \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 sass \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u0631\u0646\u06af \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u0634\u062e\u0635\u06cc \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 css \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u062a\u0646\u0647\u0627 \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u062f\u0631 \u06a9\u0644 \u0641\u0627\u06cc\u0644 css \u0627\u0639\u0645\u0627\u0644 \u0634\u0648\u062f \u0648 \u0627\u06cc\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 sass \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0647 \u0637\u0648\u0631 \u0646\u0645\u0648\u0646\u0647 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$myFont: Helvetica, sans-serif;\n$myColor: red;\n$myFontSize: 18px;\n$myWidth: 680px;\n\nbody {\n  font-family: $myFont;\n  font-size: $myFontSize;\n  color: $myColor;\n}\n\n#container {\n  width: $myWidth;\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0631\u0627\u06cc \u0646\u0648\u0639 \u0641\u0648\u0646\u062a\u060c \u0631\u0646\u06af \u0641\u0648\u0646\u062a\u060c \u0639\u0631\u0636 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06cc \u0641\u0648\u0646\u062a \u0645\u062a\u063a\u06cc\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u067e\u0633 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0641\u0627\u06cc\u0644 sass \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 \u0641\u0627\u06cc\u0644 css \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062f\u0631 css \u062e\u0648\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644 html \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  font-family: Helvetica, sans-serif;\n  font-size: 18px;\n  color: red;\n}\n\n#container {\n  width: 680px;\n  border: 1px blue double;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648 \u0641\u0627\u06cc\u0644 html \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;link rel=\"stylesheet\" href=\"mystyle.css\" \/&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n    &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n\n    &lt;div id=\"container\"&gt;This is some text inside a container.&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0648\u0639 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u200c\u0647\u0627\u060c \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u200c\u0647\u0627\u06cc \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u062f\u0631 \u062d\u0644\u0642\u0647\u200c\u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u062c\u0644\u0648\u062a\u0631 \u0628\u0647 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a. \u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u062f\u0631 \u0628\u062d\u062b \u0644\u06cc\u0633\u062a\u200c\u0647\u0627\u060c \u0646\u062d\u0648\u0647\u200c\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0647 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0627\u0632 \u0646\u0648\u0639 \u0644\u06cc\u0633\u062a \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 append \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug append(10px 12px 16px, 25px); \/\/ 10px 12px 16px 25px\n@debug append([col1-line1], col1-line2); \/\/ [col1-line1, col1-line2]\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631 \u062f\u0631 \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u0646\u062d\u0648\u0647 \u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u0648\u062f\u060c \u0645\u0642\u062f\u0627\u0631 null \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug index(1px solid red, 1px); \/\/ 1\n@debug index(1px solid red, solid); \/\/ 2\n@debug index(1px solid red, dashed); \/\/ null\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u062c\u0627\u06cc\u06af\u0627\u0647 \u0622\u0646\u060c \u0646\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0639\u0645\u0644 \u06a9\u0631\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug nth(10px 12px 16px, 2); \/\/ 12px\n@debug nth([line1 line2 line3], -1); \/\/ line3\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u0645\u0642\u062f\u0627\u0631\u06cc \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062c\u0627\u06cc\u06af\u0627\u0647 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug set-nth(10px 20px 30px, 1, 2em); \/\/ 2em 20px 30px\n@debug set-nth(10px 20px 30px, -1, 8em); \/\/ 10px, 20px, 8em\n@debug set-nth(\n  (Helvetica, Arial, sans-serif),\n  \u06f3,\n  Roboto\n); \/\/ Helvetica, Arial, Roboto\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0637\u0648\u0644 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0646\u06cc\u0632 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0631\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug length(10px 20px 30px);<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0645\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u062f\u0631 sass \u0642\u0627\u0628\u0644 \u0641\u0647\u0645 \u062a\u0631 \u0628\u0627\u0634\u062f\u060c \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0647\u0631 \u0628\u0627\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0644\u06cc\u0633\u062a \u0645\u062a\u063a\u06cc\u0631 $sizes \u0631\u0627 \u062f\u0631 \u06a9\u0644\u0627\u0633 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc\u062f\u0647\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0646\u06a9\u062a\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0644\u06cc\u0633\u062a\u060c \u0646\u06cc\u0627\u0632 \u0646\u06cc\u0633\u062a \u062d\u062a\u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 () \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$sizes: 40px, 50px, 80px;\n\n@each $size in $sizes {\n  .icon-#{$size} {\n    font-size: $size;\n    height: $size;\n    width: $size;\n  }\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u0628\u0627\u0644\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 css \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.icon-40px {\n  font-size: 40px;\n  height: 40px;\n  width: 40px;\n}\n\n.icon-50px {\n  font-size: 50px;\n  height: 50px;\n  width: 50px;\n}\n\n.icon-80px {\n  font-size: 80px;\n  height: 80px;\n  width: 80px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0642\u0627\u062f\u06cc\u0631 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u062f\u0631 \u062f\u0627\u062e\u0644 sass \u063a\u06cc\u0631 \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u0628\u0627\u0634\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0648\u0639 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 sass \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f:\u0645\u0642\u062f\u0627\u0631 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 map \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u0634\u0648\u0646\u062f. \u062f\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0632\u06cc\u0631\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f \u0645\u062a\u063a\u06cc\u0631 $font-weights \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u062f\u06cc\u06a9\u0634\u0646\u0631\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u06cc\u0627\u0641\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$font-weights: (\n  \"regular\": 400,\n  \"medium\": 500,\n  \"bold\": 700\n);\n\n@debug map-get($font-weights, \"medium\"); \/\/ 500\n@debug map-get($font-weights, \"extra-bold\"); \/\/ null\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u06a9\u0644\u06cc\u062f\u200c\u0647\u0627 \u0648 \u06cc\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u06cc\u06a9 \u062f\u06cc\u06a9\u0634\u0646\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 map \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u06a9\u0644\u06cc\u062f\u0647\u0627<\/span><\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$font-weights: (\"regular\": 400, \"medium\": 500, \"bold\": 700);\n@debug map-keys($font-weights); \/\/ \"regular\", \"medium\", \"bold\"\n<\/span><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631<\/span><\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$font-weights: (\"regular\": 400, \"medium\": 500, \"bold\": 700);\n@debug map-values($font-weights); \/\/ 400, 500, 700\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0648\u062c\u0648\u062f \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062f\u06cc\u06a9\u0634\u0646\u0631\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$font-weights: (\"regular\": 400, \"medium\": 500, \"bold\": 700);\n\n@debug map-has-key($font-weights, \"regular\"); \/\/ true\n@debug map-has-key($font-weights, \"bolder\"); \/\/ false\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f \u06a9\u0644\u06cc\u062f:\u0645\u0642\u062f\u0627\u0631 \u062f\u0631 \u062d\u0644\u0642\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0647\u0631 \u06a9\u0644\u06cc\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0622\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0647\u0631 \u0628\u0627\u0631 \u062d\u0644\u0642\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$icons: (\n  \"eye\": \"\\f112\",\n  \"start\": \"\\f12e\",\n  \"stop\": \"\\f12f\"\n);\n\n@each $name, $glyph in $icons {\n  .icon-#{$name}:before {\n    display: inline-block;\n    font-family: \"Icon Font\";\n    content: $glyph;\n  }\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0631\u062f\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062f\u0648 \u062f\u06cc\u06a9\u0634\u0646\u0631\u06cc \u0648\u06cc\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0644\u06cc\u062f:\u0645\u0642\u062f\u0627\u0631 \u0648 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062f\u06cc\u06a9\u0634\u0646\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u0632 \u0622\u0646\u200c\u0647\u0627\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 map \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0628\u0627\u06cc\u062f \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$light-weights: (\n  \"lightest\": 100,\n  \"light\": 300\n);\n$heavy-weights: (\n  \"medium\": 500,\n  \"bold\": 700\n);\n\n@debug map-merge($light-weights, $heavy-weights);\n\/\/ (\n\/\/   \"lightest\": 100,\n\/\/   \"light\": 300,\n\/\/   \"medium\": 500,\n\/\/   \"bold\": 700\n\/\/ )\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0635\u0648\u0631\u062a \u062d\u0630\u0641 \u06a9\u0644\u06cc\u062f:\u0645\u0642\u062f\u0627\u0631 \u0627\u0632 \u06cc\u06a9 \u062f\u06cc\u06a9\u0634\u0646\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 map \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$font-weights: (\n  \"regular\": 400,\n  \"medium\": 500,\n  \"bold\": 700\n);\n\n@debug map-remove($font-weights, \"regular\"); \/\/ (\"medium\": 500, \"bold\": 700)\n@debug map-remove($font-weights, \"regular\", \"bold\"); \/\/ (\"medium\": 500)\n@debug map-remove($font-weights, \"bolder\");\n\/\/ (\"regular\": 400, \"medium\": 500, \"bold\": 700)\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0647\u0645\u0627\u0646\u0646\u062f \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0627\u0632 \u0646\u0648\u0639 \u0644\u06cc\u0633\u062a\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0627\u0632 \u0646\u0648\u0639 \u06a9\u0644\u06cc\u062f:\u0645\u0642\u062f\u0627\u0631 \u0646\u06cc\u0632 \u063a\u06cc\u0631 \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0628\u062d\u062b\u200c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0632\u0628\u0627\u0646\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u0627 \u062f\u0648 \u0646\u0648\u0639 \u0645\u062e\u062a\u0644\u0641 \u062f\u0627\u0631\u06cc\u0645. \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0644\u06cc \u0648 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc. \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u062a\u0648\u0627\u0628\u0639 \u0648 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06cc\u06a9 \u06a9\u062f \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f \u0648\u0644\u06cc \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0644\u06cc \u0641\u0642\u0637 \u062f\u0631 \u0642\u0633\u0645\u062a \u0648 \u06cc\u0627 \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u06cc\u0632 \u0647\u0645\u06cc\u0646 \u0645\u0641\u0647\u0648\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-300x169.jpg.webp\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-300x169.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-1024x576.jpg.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-768x432.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/html-elements.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-html-in-simple-language-first-part\/\" class=\"zht-related-post-title\" itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"color: #000000; font-size: 16px;\"> \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u063a\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u0647\u0627\u0646\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0647\u0631 \u062a\u06af \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062f\u0631 \u062a\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u06a9\u0647 \u0645\u062a\u063a\u06cc\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u062d\u0644\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0633\u0627\u06cc\u0631 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u06a9\u0647 \u062f\u0631 \u0628\u06cc\u0631\u0648\u0646 \u0627\u0632 \u062a\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 \u062c\u0647\u0627\u0646\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0647 \u0637\u0648\u0631 \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u062a\u06af h1 \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0645\u062d\u0644\u06cc \u0627\u0632 \u0647\u0645\u0627\u0646 \u0646\u0648\u0639 \u0645\u062a\u063a\u06cc\u0631 \u062c\u0647\u0627\u0646\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0631\u0646\u06af \u0633\u0628\u0632 \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u06af p \u0631\u0646\u06af \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 \u062c\u0647\u0627\u0646\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0641\u0627\u06cc\u0644 scss<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\"> (\u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u062f\u0631 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0641\u0631\u0645\u062a \u0641\u0627\u06cc\u0644 \u0627\u0632 \u0646\u0648\u0639 scss \u0645\u06cc \u0628\u0627\u0634\u062f.)<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$myColor: red;\n\nh1 {\n  $myColor: green;\n  color: $myColor;\n}\n\np {\n  color: $myColor;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0641\u0627\u06cc\u0644 css \u06a9\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0641\u0627\u06cc\u0644 scss \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">h1 {\n  color: green;\n}\n<\/span><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0641\u0627\u06cc\u0644 html<\/span><\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;link rel=\"stylesheet\" href=\"mystyle.css\" \/&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n    &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062d\u0627\u0644 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0627\u0632 \u0642\u0633\u0645\u062a \u0628\u0647 \u0628\u0639\u062f \u062f\u0631 \u0641\u0627\u06cc\u0644 css\u060c \u062a\u06af\u200c\u0647\u0627 \u0645\u0642\u062f\u0627\u0631\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 \u062c\u0647\u0627\u0646\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0645\u0648\u0631\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f. \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627 \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u0648\u0644\u06cc \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u0647\u0627\u0646\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$myColor: red;\n\nh1 {\n  $myColor: green !global;\n  color: $myColor;\n}\n\np {\n  color: $myColor;\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f \u0648\u0627\u0698\u0647 !global \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 \u062c\u0647\u0627\u0646\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0645\u062a\u063a\u06cc\u0631 \u062c\u0647\u0627\u0646\u06cc\u060c \u0645\u0642\u062f\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u06af h1 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0641\u0627\u06cc\u0644 css \u0646\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">h1 {\n  color: green;\n}\n\np {\n  color: green;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062a\u0639\u0631\u06cc\u0641 \u062a\u0648\u062f\u0631\u062a\u0648 \u062f\u0631 \u0622\u0645\u0648\u0632\u0634 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06af\u0631 \u0627\u0632 \u0645\u0642\u0627\u0644\u0647\u200c\u06cc \u0622\u0645\u0648\u0632\u0634 css \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u06a9\u0647 \u0628\u06cc\u0627\u0646 \u0634\u062f\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">nav ul {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\nnav li {\n  display: inline-block;\n}\nnav a {\n  display: block;\n  padding: 6px 12px;\n  text-decoration: none;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u062f\u06cc\u0646 \u0634\u06a9\u0644 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u067e\u062f\u0631\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0645\u0634\u062e\u0635\u06cc \u0628\u06af\u06cc\u0631\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0639\u0631\u06cc\u0641 \u0628\u0627\u0644\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 scss \u0646\u06cc\u0632 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">nav {\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  li {\n    display: inline-block;\n  }\n  a {\n    display: block;\n    padding: 6px 12px;\n    text-decoration: none;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u0647\u0645\u0627\u0646 \u0641\u0627\u06cc\u0644 css \u0627\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0627\u0644\u0627\u062a\u0631 \u0645\u062b\u0627\u0644 \u0632\u062f\u0647 \u0634\u062f\u060c \u0641\u0627\u06cc\u0644 html \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;link rel=\"stylesheet\" href=\"mystyle.css\" \/&gt;\n  &lt;body&gt;\n    &lt;nav&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;HTML&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;CSS&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;SASS&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f \u0648\u0627\u0698\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u062e\u0635\u060c \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062e\u0635 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u0637\u0648\u0631 \u0646\u0645\u0648\u0646\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0641\u0648\u0646\u062a\u060c \u0646\u0648\u0639 \u0641\u0648\u0646\u062a\u060c \u0631\u0646\u06af \u0641\u0648\u0646\u062a \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06cc \u0641\u0648\u0646\u062a \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u06cc\u0646 \u0634\u06a9\u0644\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u062f\u0631 \u0639\u0648\u0636 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u06a9 \u062a\u06a9 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 sass \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">font: {\n  family: Helvetica, sans-serif;\n  size: 18px;\n  weight: bold;\n}\n\ntext: {\n  align: center;\n  transform: lowercase;\n  overflow: hidden;\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0648\u0644\u060c \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0641\u0648\u0646\u062a \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0644\u0627\u0635\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0631\u0627\u06cc \u0645\u0648\u0631\u062f \u062f\u0648\u0645 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u062a\u0646 \u06cc\u0627 \u0639\u0628\u0627\u0631\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0622\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u062e\u0631\u0648\u062c\u06cc \u06a9\u062f sass \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.font {\n  font-family: Helvetica, sans-serif;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.text {\n  text-align: center;\n  text-transform: lowercase;\n  text-overflow: hidden;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0642\u0627\u0628\u0644\u06cc\u062a import \u062f\u0631 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062d\u062a\u0645\u0627 \u0628\u0631\u0627\u06cc\u062a\u0627\u0646 \u067e\u06cc\u0634 \u0622\u0645\u062f\u0647 \u06a9\u0647 \u0628\u0627 \u0627\u0635\u0637\u0644\u0627\u062d DRY (Don\u2019t Repeat Yourself) \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0635\u0637\u0644\u0627\u062d \u062f\u0631 \u0632\u0645\u0627\u0646\u06cc \u0628\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u0631\u0648\u062f \u06a9\u0647 \u0634\u0645\u0627 \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u06a9\u062f\u06cc \u0631\u0627 \u062f\u0631 \u062c\u0627\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0648\u062c\u0628 \u0627\u06cc\u0646 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062d\u062c\u0645 \u06a9\u062f \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627\u0644\u0627 \u0628\u0631\u0648\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0632\u0627\u06cc\u0627\u06cc sass \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0634\u0645\u0627 \u0627\u0632 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f\u0647\u0627\u06cc \u06cc\u06a9\u0633\u0627\u0646 \u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0631\u0647\u06cc\u0632 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u06cc \u0628\u0647 \u0646\u0627\u0645 import \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"150\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-300x150.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-300x150.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-768x384.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/html-hpg-featured-new.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/150;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learning-basic-html\/\" class=\"zht-related-post-title\" itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"color: #000000; font-size: 16px;\"> \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0634\u0645\u0627 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 variables \u062f\u0627\u0631\u06cc\u062f \u0648 \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u062f\u062a\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u06cc\u06a9 \u0631\u0648\u0634 \u0627\u06cc\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0647\u0631 \u0628\u0627\u0631 \u062f\u0631 \u0647\u0631 \u0641\u0627\u06cc\u0644 sass \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u0646\u062c\u0631 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u06a9\u0631\u0627\u0631 \u0646\u06a9\u0631\u062f\u0646 \u0631\u0627 \u0631\u0639\u0627\u06cc\u062a \u0646\u06a9\u0646\u06cc\u062f. \u0631\u0648\u0634 \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a import \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 variables \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062f\u0627\u0631\u06cc\u0645:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$myFont: Helvetica, sans-serif;\n$myColor: red;\n$myFontSize: 18px;\n$myWidth: 680px;\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06a9\u0646\u0648\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u062a\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 sass \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@import \"variables\";\n\nbody {\n  font-family: $myFont;\n  font-size: $myFontSize;\n  color: $myColor;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0634\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  font-family: Helvetica, sans-serif;\n  font-size: 18px;\n  color: red;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0647\u0645\u0686\u06cc\u0646 variables \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u062f\u0631 \u0633\u0627\u06cc\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc sass \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f\u060c \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">&#8221; \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u067e\u0633\u0648\u0646\u062f \u0641\u0627\u06cc\u0644 sass \u0646\u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u062e\u0648\u062f \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0641\u0631\u0645\u062a \u0622\u0646 \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc \u062f\u0647\u062f. &#8220;<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc sass \u06cc\u06a9 \u0646\u06a9\u062a\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u0622\u0646 \u0627\u06cc\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 sass \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0627\u0644\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 css \u0628\u0631\u0627\u06cc \u0622\u0646 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0648 \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 sass \u06cc\u06a9 \u0642\u0627\u0628\u0644\u06cc\u062a\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0627\u0646\u0639 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0641\u0627\u06cc\u0644 sass \u0634\u0648\u06cc\u062f \u0648 \u062a\u0646\u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632\u062a\u0627\u0646 \u0647\u0633\u062a\u060c \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0642\u0628\u0644 \u0627\u0632 \u0627\u0633\u0645 \u0641\u0627\u06cc\u0644 sass\u060c \u0627\u0632 \u0622\u0646\u062f\u0631\u0644\u0627\u06cc\u0646 (_) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"169\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-300x169.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0633\u0648\u0645\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-300x169.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-768x432.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/000-Semantic-HTML.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/169;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/free-html-training\/\" class=\"zht-related-post-title\" itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0633\u0648\u0645<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0631 \u0632\u0645\u0627\u0646\u06cc \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 css \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0647\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644 html \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0641\u0627\u06cc\u0644 sass \u06cc\u06a9 \u0641\u0627\u06cc\u0644 css \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f\u060c \u062a\u0645\u0627\u0645\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 main \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0633\u067e\u0633 \u0627\u0632 \u0631\u0648\u06cc \u0641\u0627\u06cc\u0644 \u0646\u0647\u0627\u06cc\u06cc main\u060c \u0641\u0627\u06cc\u0644 css \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc sass \u0632\u06cc\u0631 \u06a9\u0647 \u062f\u0631 \u0646\u0627\u0645 \u062e\u0648\u062f \u0627\u0632 \u0622\u0646\u062f\u0631\u0644\u0627\u06cc\u0646 \u062f\u0627\u0631\u0646\u062f (\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 import \u06a9\u0631\u062f\u0646 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0622\u0648\u0631\u062f\u0646 \u0622\u0646\u062f\u0631\u0644\u0627\u06cc\u0646 \u0642\u0628\u0644 \u0627\u0632 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0646\u0645\u06cc \u0628\u0627\u0634\u062f) \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644\u06cc \u0628\u0647 \u0646\u0627\u0645 main \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. <\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0633\u067e\u0633 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0641\u0627\u06cc\u0644 main \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f\u060c \u062a\u0645\u0627\u0645\u06cc \u062a\u0639\u0627\u0631\u06cc\u0641 \u062f\u0627\u062e\u0644 \u062a\u0645\u0627\u0645\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc sass \u0646\u06cc\u0632 \u062f\u0631 \u0641\u0627\u06cc\u0644 css \u0646\u0647\u0627\u06cc\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u0634\u0648\u0646\u062f. \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc sass \u0645\u0647\u0645 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc\u200c\u062f\u0627\u0646\u06cc\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 css\u060c \u06a9\u062f\u0647\u0627 \u0627\u0632 \u0628\u0627\u0644\u0627 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062e\u0627\u0637\u0631 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u0645\u062a\u063a\u06cc\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0641\u0627\u06cc\u0644 css \u0646\u0645\u06cc\u200c\u0634\u0646\u0627\u0633\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@import \"variables\";\n\n@import \"reset\";\n\n@import \"color\";\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u062f\u06cc\u062f\u060c \u0642\u0627\u0628\u0644\u06cc\u062a import \u062f\u0631 sass \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px; color: #000000;\">Mixin \u0648 include \u062f\u0631 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u062f\u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0631 sass \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0634\u062e\u0635\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u06af\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062f\u0631 \u0628\u062e\u0634 \u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u062f css \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 mixin \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c mixin \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u0634\u0627\u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0633\u0631\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0645\u062b\u0644 \u0631\u0646\u06af\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0648 \u06cc\u0627 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 include \u0628\u0647 \u0646\u0648\u0639\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0647\u0631 \u0642\u0633\u0645\u062a \u0627\u0632 \u06a9\u062f Sass \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f\u06cc mixin \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u0646\u062f \u0648 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0634\u062e\u0635 \u0647\u0633\u062a\u0646\u062f. <\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u062b\u0644\u0627 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0631 \u0633\u0627\u06cc\u0632\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a\u062a\u0627\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 mixin \u0628\u0631\u0627\u06cc \u0633\u0627\u06cc\u0632 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u0647\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0633\u0627\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0622\u0646 \u0633\u0627\u06cc\u0632 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c \u0635\u0631\u0641\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 include \u0622\u0646 \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u06cc\u06a9 mixin \u0628\u0647 \u0646\u0627\u0645 test \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0645. \u062f\u0631 \u0627\u06cc\u0646 mixin \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0647\u0645\u0686\u0648\u0646 \u0631\u0646\u06af\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a\u060c \u0646\u0648\u0639 \u0641\u0648\u0646\u062a \u0648 \u062f\u0627\u0634\u062a\u0646 \u0645\u0631\u0632 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062d\u0627\u0644 \u0627\u06a9\u0646\u0648\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645\u06cc \u062a\u06af\u200c\u0647\u0627\u06cc h1 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u0645.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin test {\n  color: red;\n  font-size: 25px;\n  font-weight: bold;\n  border: 1px solid blue;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0627\u0632 include \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.h1 {\n  @include test;\n  background-color: green;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062a\u06af h1 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc mixin \u0628\u0647 \u0646\u0627\u0645 test\u060c \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0622\u0646 \u0646\u06cc\u0632 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c \u062e\u0627\u0635\u06cc \u0627\u0632 \u06cc\u06a9 mixin \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0631\u062b \u0628\u0628\u0631\u06cc\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062a\u06af\u060c \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u0622\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0646\u06af \u062f\u0648\u0628\u0627\u0631\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0631\u0646\u06af \u062a\u06af h1 \u0628\u0647 \u0631\u0646\u06af \u0633\u0628\u0632 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.danger {\n  @include test;\n  color: green;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0633\u0627\u0644\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u0628\u0647 \u0622\u0646 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0647\u0645\u0627\u0646 \u0628\u062d\u062b \u062a\u0631\u062a\u06cc\u0628 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u062f\u0631 css \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627 \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 include \u0631\u0627 \u067e\u0627\u06cc\u06cc\u0646 \u062a\u0631 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc color \u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc color \u0628\u0631 \u0631\u0648\u06cc \u0627\u0644\u0645\u0627\u0646 \u0627\u0639\u0645\u0627\u0644 \u0646\u0645\u06cc \u06af\u0631\u062f\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u06a9\u0644\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 mixin \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin name {\n    property: value;\n    property: value;\n    ...\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648 \u0633\u0627\u062e\u062a\u0627\u0631 include \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">selector {\n  @include mixin-name;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 mixin\u060c mixin \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u06cc\u06a9 mixin \u0628\u0647 \u0646\u0627\u0645 special-text\u060c \u0627\u0632 \u06f3 mixin \u062f\u06cc\u06af\u0631 \u0646\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0648\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 mixin \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin special-text {\n  @include important-text;\n  @include link;\n  @include special-border;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c mixin \u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 sass \u0647\u0645\u0627\u0646\u0646\u062f \u062a\u0648\u0627\u0628\u0639 \u0645\u06cc\u200c\u0628\u0627\u0634\u0646\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u063a\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u062f\u0647\u06cc\u062f\u060c \u0628\u0631\u0627\u06cc \u06cc\u06a9 mixin \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u063a\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u062f\u0631 \u062c\u0644\u0648\u06cc \u0646\u0627\u0645 mixin \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0631\u0627\u0646\u062a\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0628\u0631\u0627\u06cc mixin \u0628\u0647 \u0646\u0627\u0645 bordered \u062f\u0648 \u0645\u062a\u063a\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u06af \u0648 \u0639\u0631\u0636 \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"188\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-300x188.jpg\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-300x188.jpg 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-1024x640.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-768x480.jpg 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-1536x960.jpg 1536w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css.jpg 1920w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/188;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-how-to-style-web-pages-with-css-colors-in-css\/\" class=\"zht-related-post-title\" itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 (\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css)<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"font-size: 16px;\">&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u062d\u0648\u0647 \u06cc \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0647\u0645 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0622\u0646\u200c\u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f (\u0647\u0645\u0686\u0648\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0648\u0627\u0628\u0639 \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc). \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0648 \u06a9\u0644\u0627\u0633 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u06a9\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u06cc mixin \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u062f\u0648 \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u062e\u0648\u062f \u0645\u0646\u062c\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0634\u0645\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 mixin\u060c \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 \u0648 \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0648 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin bordered($color, $width) {\n  border: $width solid $color;\n}\n\n.myArticle {\n  @include bordered(blue, 1px); \/\/ Call mixin with two values\n}\n\n.myNotes {\n  @include bordered(red, 2px); \/\/ Call mixin with two values\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u06cc\u062c\u0627\u062f \u0641\u0627\u06cc\u0644 css \u0627\u0632 \u0641\u0627\u06cc\u0644 scss \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0641\u0627\u06cc\u0644 css \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.myArticle {\n  border: 1px solid blue;\n}\n\n.myNotes {\n  border: 2px solid red;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648 \u0641\u0627\u06cc\u0644 html \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646 \u062c\u0647\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;link rel=\"stylesheet\" href=\"mystyle.css\" \/&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;p class=\"myArticle\"&gt;This is some text in my article.&lt;\/p&gt;\n    &lt;p class=\"myNotes\"&gt;This is some text in my notes.&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 mixin \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin bordered($color: blue, $width: 1px) {\n  border: $width solid $color;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u0645\u0642\u062f\u0627\u0631 \u0631\u0646\u06af \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0645\u06cc \u0628\u0627\u0634\u062f \u0648\u0644\u06cc \u0645\u0642\u062f\u0627\u0631 \u0639\u0631\u0636 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 include \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0646\u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 mixin \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.myTips {\n  @include bordered($color: orange);\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">Extend \u0648 \u0627\u0631\u062b \u0628\u0631\u06cc \u062f\u0631 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0631 sass \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0634\u062e\u0635\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0633\u0631\u06cc \u06a9\u0644\u0627\u0633 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0646\u06cc\u0632 \u0628\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0628\u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631 \u0627\u06cc\u0646 \u0645\u0633\u0627\u0644\u0647\u060c \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0646\u0627\u0645 button-basic \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0633\u067e\u0633 \u062f\u0631 \u062f\u0648 \u06a9\u0644\u0627\u0633 \u0628\u0639\u062f\u06cc\u060c \u0627\u0628\u062a\u062f\u0627 \u0627\u0632 \u06a9\u0644\u0627\u0633 \u0627\u0648\u0644\u06cc\u0647 \u0627\u0631\u062b \u0628\u0631\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0633\u067e\u0633 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062e\u0627\u0635 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0647\u0631 \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.button-basic {\n  border: none;\n  padding: 15px 30px;\n  text-align: center;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.button-report {\n  @extend .button-basic;\n  background-color: red;\n}\n\n.button-submit {\n  @extend .button-basic;\n  background-color: green;\n  color: white;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u06a9\u0647 \u062f\u0631 scss \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0648\u0642\u062a\u06cc \u0628\u0647 css \u062a\u0628\u062f\u06cc\u0644 \u0634\u0648\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.button-basic,\n.button-report,\n.button-submit {\n  border: none;\n  padding: 15px 30px;\n  text-align: center;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.button-report {\n  background-color: red;\n}\n\n.button-submit {\n  background-color: green;\n  color: white;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc scss \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0627\u0633\u062a. \u0634\u0645\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 scss \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062d\u062a\u06cc \u062a\u0648\u0627\u0628\u0639 \u0648 \u06cc\u0627 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0634\u0631\u0637\u06cc \u0648 \u062d\u0644\u0642\u0647\u200c\u0647\u0627 \u0631\u0627 \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 sass<\/span><span style=\"color: #000000;\"> \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc scss \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u062f \u0648 \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u06cc\u062f \u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 scss \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0631\u0627\u0646\u062a \u06a9\u0645\u06a9 \u06a9\u0646\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631\u0648\u0646 \u06cc\u0627\u0628\u06cc (interpolation) \u062f\u0631 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631\u0648\u0646 \u06cc\u0627\u0628\u06cc \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f\u060c \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0627\u0633\u0645 \u06a9\u0644\u0627\u0633 \u0648 \u06cc\u0627 \u0622\u06cc\u062f\u06cc \u0648 \u06cc\u0627 \u0647\u0631 \u0645\u0648\u0631\u062f \u062e\u0627\u0635\u06cc \u06a9\u0647 \u062f\u0631 \u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u062f \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u0634\u062e\u0635 \u0622\u0646 \u0631\u0627 \u0628\u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin corner-icon($name, $top-or-bottom, $left-or-right) {\n  .icon-#{$name} {\n    background-image: url(\"\/icons\/#{$name}.svg\");\n    position: absolute;\n    #{$top-or-bottom}: 0;\n    #{$left-or-right}: 0;\n  }\n}\n\n@include corner-icon(\"mail\", top, left);\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u06cc\u06a9 mixin \u0628\u0627 \u0646\u0627\u0645 corner-icon \u0648 \u0628\u0627 \u06f3 \u0648\u0631\u0648\u062f\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 mixin \u06cc\u06a9 \u0639\u0628\u0627\u0631\u062a \u0628\u0647 \u0635\u0648\u0631\u062a #{$name} \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u062f\u0627\u062e\u0644 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0632 \u0647\u0645\u06cc\u0646 \u0639\u0628\u0627\u0631\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u062f\u0631 \u0622\u062f\u0631\u0633 url \u062a\u06a9\u0631\u0627\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06af\u0631 \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f\u060c \u0646\u0627\u0645 \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0648\u0631\u0648\u062f\u06cc mixin \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 include \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0648\u0644\u060c \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0627 \u0646\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0648\u0644 \u062f\u0631 css \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0622\u062f\u0631\u0633 url \u0622\u0646 \u0646\u06cc\u0632\u060c \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062f\u0631 \u0645\u06a9\u0627\u0646 #{$name} \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a \u0648 \u0627\u06cc\u0646 \u062f\u0642\u06cc\u0642\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u06cc\u0627\u0628\u06cc \u0648 \u06cc\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u06cc \u0628\u0627\u0634\u062f. <\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0627\u0632 #{} \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u06a9\u0646\u06cc\u062f\u060c sass \u0641\u0642\u0637 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0647 \u0646\u0627\u0645 $name \u062e\u0648\u0627\u0647\u062f \u062f\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0646\u0627\u0645 \u062a\u0627\u0628\u0639 \u0648 \u06cc\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 url \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0631\u0627\u062f \u062e\u0648\u0627\u0647\u062f \u06af\u0631\u0641\u062a. \u062f\u0631 \u0648\u0627\u0642\u0639 \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0639\u0628\u0627\u0631\u062a \u0628\u0647 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0639\u0646\u06cc #{$name} \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062a\u0627\u0628\u0639 mixin \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.icon-mail {\n  background-image: url(\"\/icons\/mail.svg\");\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648 \u06cc\u0627 \u062f\u0631 \u0645\u062b\u0627\u0644 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 unique-id() \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0627\u0633\u0645 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062f\u0631 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 sass \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 css \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 mixin \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0647 \u0646\u0627\u0645 $name \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u062f\u0631 \u0642\u0633\u0645\u062a @keyframes \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 #{$name} \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062f\u0627\u062e\u0644 @keyframes \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0627\u0632 @content \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u062a\u0627\u0628\u0639 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0648\u06cc\u0698\u06af\u06cc \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u06a9\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u062a\u0631 \u062f\u0631 \u06a9\u0644\u0627\u0633 pulse \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 include \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644 sass \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 include \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @content \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062f\u0644\u062e\u0648\u0627\u0647\u062a\u0627\u0646 \u0631\u0627 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 mixin \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin inline-animation($duration) {\n  $name: inline-#{unique-id()};\n\n  @keyframes #{$name} {\n    @content;\n  }\n\n  animation-name: $name;\n  animation-duration: $duration;\n  animation-iteration-count: infinite;\n}\n\n.pulse {\n  @include inline-animation(2s) {\n    from {\n      background-color: yellow;\n    }\n    to {\n      background-color: red;\n    }\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 pulse \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u060c \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 mixin \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0648\u062f\u0646\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u0648 \u0633\u067e\u0633 \u0628\u0631\u0627\u06cc @keyframes \u06cc\u06a9 \u0622\u06cc\u062f\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062f\u0631 sass \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0648\u062f \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a. <\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.pulse {\n  animation-name: inline-ubq9zfb;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n}\n@keyframes inline-ubq9zfb {\n  from {\n    background-color: yellow;\n  }\n  to {\n    background-color: red;\n  }\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0639\u0645\u0644\u06af\u0631\u0647\u0627 \u062f\u0631 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06cc\u06a9\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u0628 sass\u060c \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u062f\u0647\u0627 \u062f\u0631 \u0622\u0646 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0639\u062f\u062f \u062e\u0627\u0635\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0631\u0636\u060c \u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u06cc\u06a9 \u0641\u0648\u0646\u062a \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f\u060c \u062d\u0627\u0635\u0644 \u0636\u0631\u0628 \u0648 \u06cc\u0627 \u062c\u0645\u0639 \u0648 \u06cc\u0627 \u062a\u0642\u0633\u06cc\u0645 \u0648 \u062a\u0641\u0631\u06cc\u0642 \u062f\u0648 \u0639\u062f\u062f \u0648 \u06cc\u0627 \u0686\u0646\u062f \u0639\u062f\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0636\u0631\u0628 \u0648 \u062a\u0642\u0633\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u06a9\u0644\u0627\u0633 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.container {\n  width: 100%;\n}\n\n.maktabkhooneh{\n  float: left;\n  width: 400px \/ 500px * 100%;\n}\n\n.maktab {\n  float: right;\n  width: 200px \/ 500px * 100%;\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u062a\u06cc\u062c\u0647 \u06cc \u0622\u0646 \u062f\u0631 \u0641\u0627\u06cc\u0644 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627 \u06a9\u0647 \u062f\u0631 scss \u0645\u0648\u0642\u0639 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0628\u0647 css\u060c \u0639\u0645\u0644\u06cc\u0627\u062a \u0647\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 \u06cc \u0622\u0646 \u062f\u0631 \u0641\u0627\u06cc\u0644 css \u06a9\u0647 \u06cc\u06a9 \u0639\u062f\u062f \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.container {\n  width: 100%;\n}\n\n.maktabkhooneh {\n  float: left;\n  width: 80%;\n}\n\n.maktab {\n  float: right;\n  width: 40%;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u0647\u0627 \u062f\u0631 \u0647\u0631 \u0642\u0633\u0645\u062a \u0627\u0632 \u0641\u0627\u06cc\u0644 scss \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u062d\u062a\u06cc \u062f\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631. \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u062a\u0646\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 scss \u0642\u0627\u0628\u0644 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 css \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0634\u0645\u0627 \u062d\u062a\u06cc \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u062f\u0647\u0627 \u062f\u0631 \u0631\u0646\u06af\u200c\u0647\u0627 \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0645\u062b\u0644\u0627 \u06a9\u062f hex \u062f\u0648 \u062a\u0627 \u0631\u0646\u06af \u0631\u0627 \u0628\u0627 \u06cc\u06a9\u062f\u06af\u06cc\u0631 \u062c\u0645\u0639 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0645\u0642\u062f\u0627\u0631\u06cc \u0636\u0631\u0628 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p {\n  color: #010203 + #040506;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u0646\u062a\u06cc\u062c\u0647 \u06cc \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p {\n  color: #050709;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648 \u06cc\u0627 \u06a9\u062f \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u062f\u0631 \u0645\u0642\u062f\u0627\u0631\u06cc \u0636\u0631\u0628 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p {\n  color: #010203 * 2;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u0646\u062a\u06cc\u062c\u0647 \u06cc \u0622\u0646 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0647\u0631 \u062f\u0648\u062a\u0627 \u0639\u062f\u062f \u062f\u0631 \u06a9\u0646\u0627\u0631 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u062f\u0631 \u0639\u062f\u062f \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0636\u0631\u0628 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p {\n  color: #020406;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0646\u0647\u0627 \u0646\u06a9\u062a\u0647\u200c\u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u0631\u06cc\u0627\u0636\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062d\u062a\u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u0648 \u0637\u0631\u0641 \u0645\u0648\u0631\u062f \u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u0632 \u06cc\u06a9 \u0646\u0648\u0639 \u0648\u0627\u062d\u062f \u0628\u0627\u0634\u0646\u062f. \u0628\u0647 \u0637\u0648\u0631 \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0645\u062b\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u0637\u0648\u0644 \u0628\u0627 \u062b\u0627\u0646\u06cc\u0647 \u0645\u0648\u0631\u062f \u0645\u0642\u0627\u06cc\u0633\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a\u060c \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 Sass \u0627\u0631\u0648\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug 10s + 15s; \/\/ 25s\n@debug 1in - 10px; \/\/ 0.8958333333in\n@debug 5px * 3px; \/\/ 15px*px\n@debug (12px\/4px); \/\/ 3\n@debug 1in % 9px; \/\/ 0.0625in\n@debug 100px + 50; \/\/ 150px\n@debug 4s * 10; \/\/ 40s\n@debug +(5s + 7s); \/\/ 12s\n@debug -(50px + 30px); \/\/ -80px\n@debug -(10px - 15px); \/\/ 5px\n@debug 4px * 6px; \/\/ 24px*px (read \"square pixels\")\n@debug 5px \/ 2s; \/\/ 2.5px\/s (read \"pixels per second\")\n@debug 5px * 30deg \/ 2s \/ 24em; \/\/ 3.125px*deg\/s*em\n                                \/\/ (read \"pixel-degrees per second-em\")\n$degrees-per-second: 20deg\/1s;\n@debug $degrees-per-second; \/\/ 20deg\/s\n@debug 1 \/ $degrees-per-second; \/\/ 0.05s\/deg\n@debug 100px + 10s;\n\/\/ Error: Incompatible units px and s.\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u062e\u0634 \u062c\u0630\u0627\u0628 \u062a\u0631 \u062f\u0631 scss \u0627\u0645\u06a9\u0627\u0646 \u0627\u062a\u0635\u0627\u0644 \u0631\u0634\u062a\u0647 \u0647\u0627 \u0628\u0647 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0628\u0627 \u0639\u0645\u0644\u06af\u0631\u062f + \u0645\u06cc \u0628\u0627\u0634\u062f. \u0645\u062b\u0644\u0627 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0634\u0645\u0627 \u0627\u0632 :before \u0648\u06cc\u0627 :after \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u062f \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 content \u0645\u06cc \u0628\u0627\u0634\u0646\u062f\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631 \u0647\u0627 \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u062f + \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">p:before {\n  content: \"this\" + \"is\" + \"mycontent\";\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0647\u0645\u0686\u0648\u0646 &lt;\u060c &gt;\u060c =\u060c ! \u0648 \u0645\u0648\u0627\u0631\u062f \u0645\u0634\u0627\u0628\u0647 \u06a9\u0647 \u062f\u0631 \u062a\u0645\u0627\u0645 \u0632\u0628\u0627\u0646\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u0631\u0627 \u0646\u06cc\u0632 \u062f\u0631 sass \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0639\u0631\u06cc\u0641 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0647\u0645\u062f\u06cc\u06af\u0631 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0639\u0645\u0644\u06af\u0631 \u0647\u0627 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f. \u0639\u0628\u0627\u0631\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u0646\u062a \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u062f\u0631 \u0648\u0627\u0642\u0639 \u062e\u0631\u0648\u062c\u06cc sass \u0628\u0631\u0627\u06cc \u0647\u0631 \u062e\u0637 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0645\u06cc\u200c\u0628\u0627\u0634\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0639\u0628\u0627\u0631\u062a == \u062c\u0647\u062a \u062a\u0633\u0627\u0648\u06cc \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u0639\u0628\u0627\u0631\u062a != \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0639\u062f\u0645 \u062a\u0633\u0627\u0648\u06cc \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u0634\u0645\u0627 \u0627\u0646\u0648\u0627\u0639 \u0645\u062a\u063a\u06cc\u0631\u200c\u0647\u0627\u060c \u062a\u0648\u0627\u0628\u0639\u060c \u0631\u0646\u06af\u200c\u0647\u0627\u060c \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u0648 \u0631\u0634\u062a\u0647\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0639\u0645\u0644\u06af\u0631\u062f\u0647\u0627 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug 1px == 1px; \/\/ true\n@debug 1px != 1em; \/\/ true\n@debug 1 != 1px; \/\/ true\n@debug 96px == 1in; \/\/ true\n\n@debug \"Helvetica\" == Helvetica; \/\/ true\n@debug \"Helvetica\" != \"Arial\"; \/\/ true\n\n@debug hsl(34, 35%, 92.1%) == #f2ece4; \/\/ true\n@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); \/\/ true\n\n@debug (5px 7px 10px) == (5px 7px 10px); \/\/ true\n@debug (5px 7px 10px) != (10px 14px 20px); \/\/ true\n@debug (5px 7px 10px) != (5px, 7px, 10px); \/\/ true\n@debug (5px 7px 10px) != (5px 5px 10px); \/\/ true\n\n$theme: (\n  \"venus\": #998099,\n  \"nebula\": #d2e1dd\n);\n@debug $theme == (\"venus\": #998099, \"nebula\": #d2e1dd); \/\/ true\n@debug $theme != (\"venus\": #998099, \"iron\": #dadbdf); \/\/ true\n\n@debug true == true; \/\/ true\n@debug true != false; \/\/ true\n@debug null != false; \/\/ true\n\n@debug get-function(\"rgba\") == get-function(\"rgba\"); \/\/ true\n@debug get-function(\"rgba\") != get-function(\"hsla\"); \/\/ true\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc\u060c \u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u0631\u0627\u0628\u0637\u0647\u200c\u0627\u06cc \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u0639\u0645\u0644\u06af\u0631\u0647\u0627 \u06a9\u0647 \u0634\u0627\u0645\u0644 &gt;\u060c &lt;\u060c &lt;=\u060c &gt;= \u0645\u06cc \u0628\u0627\u0634\u0646\u062f\u060c \u062c\u0647\u062a \u0645\u0642\u0627\u06cc\u0633\u0647\u200c\u06cc \u062f\u0648 \u0645\u062a\u063a\u06cc\u0631\u060c \u0631\u0634\u062a\u0647 \u0648\u06cc\u0627 \u0639\u062f\u062f \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f. \u062a\u0646\u0647\u0627 \u0646\u06a9\u062a\u0647\u200c\u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u0631\u0627\u0628\u0637\u0647\u200c\u0627\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062d\u062a\u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u0648 \u0637\u0631\u0641 \u0645\u0648\u0631\u062f \u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u0632 \u06cc\u06a9 \u0646\u0648\u0639 \u0648\u0627\u062d\u062f \u0628\u0627\u0634\u0646\u062f. \u0628\u0647 \u0637\u0648\u0631 \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0645\u062b\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u0637\u0648\u0644 \u0628\u0627 \u062b\u0627\u0646\u06cc\u0647 \u0645\u0648\u0631\u062f \u0645\u0642\u0627\u06cc\u0633\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a\u060c \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 Sass \u0627\u0631\u0648\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug 100 &gt; 50; \/\/ true\n@debug 10px &lt; 17px; \/\/ true\n@debug 96px &gt;= 1in; \/\/ true\n@debug 1000ms &lt;= 1s; \/\/ true\n@debug 100 &gt; 50px; \/\/ true\n@debug 10px &lt; 17; \/\/ true\n@debug 100px &gt; 10s; \/\/ Error: Incompatible units px and s.\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u0632 \u062c\u0645\u0644\u0647 \u062f\u06cc\u06af\u0631 \u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 sass \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0628\u0648\u0644\u06cc\u0646\u200c\u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a true \u0648 false \u0645\u06cc \u0628\u0627\u0634\u0646\u062f \u0631\u0627 \u0646\u06cc\u0632 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u06a9\u062f \u0628\u0627 \u0641\u0631\u0645\u062a scss \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0648\u0644\u06cc\u0646\u200c\u0647\u0627 \u062f\u0631 \u06a9\u0646\u0627\u0631 and\u060c or \u0648 not \u06a9\u0627\u0631\u0628\u0631\u062f \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0648\u0644\u06cc\u0646\u200c\u0647\u0627 \u062f\u0631 \u062a\u0639\u0631\u06cc\u0641 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0634\u0631\u0637\u06cc \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f \u0648 \u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0648\u0627\u0646\u0633\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0639\u0645\u0644\u06af\u0631\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@debug not true; \/\/ false\n@debug not false; \/\/ true\n\n@debug true and true; \/\/ true\n@debug true and false; \/\/ false\n\n@debug true or false; \/\/ true\n@debug false or false; \/\/ false\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062a\u0648\u0627\u0628\u0639 \u062f\u0631 \u0622\u0645\u0648\u0632\u0634 sass<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u067e\u06cc\u0634\u200c\u062a\u0631 \u0628\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0631 sass \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f. \u062a\u0627\u0628\u0639 mixin \u0648 include \u062f\u0648 \u062a\u0627\u0628\u0639 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0631 sass \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u062a\u0648\u0627\u0628\u0639 \u06a9\u0647 \u062c\u0632 \u062a\u0648\u0627\u0628\u0639 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 sass \u0645\u06cc \u0628\u0627\u0634\u0646\u062f\u060c \u062a\u0646\u0647\u0627 \u062a\u0648\u0627\u0628\u0639 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 sass \u0646\u0645\u06cc\u200c\u0628\u0627\u0634\u0646\u062f \u0648 \u062a\u0648\u0627\u0628\u0639 \u062f\u06cc\u06af\u0631\u06cc \u0646\u06cc\u0632 \u062f\u0631 sass \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0647 \u0622\u0646 \u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u062a\u0648\u0627\u0628\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0648\u0627\u0628\u0639 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f\u062a\u0627\u0646 \u0631\u0627 \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0648\u0627\u0628\u0639 lighten \u0648 darken \u0627\u0648\u0644\u06cc\u0646 \u062a\u0648\u0627\u0628\u0639 \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u062a\u0648\u0627\u0628\u0639 \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0634\u0645\u0627 \u0631\u0627 \u0631\u0648\u0634\u0646 \u062a\u0631 \u0648 \u06cc\u0627 \u062a\u06cc\u0631\u0647 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0627\u0628\u0639 lighten \u0628\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u0627\u0648\u0644\u06cc \u06a9\u062f \u0631\u0646\u06af \u0648 \u062f\u0648\u0645\u06cc \u062f\u0631\u0635\u062f \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u062f\u0631\u0635\u062f\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0631\u0648\u0634\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background: lighten(#800, 20%);\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc css \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background: #e00;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639\u060c \u062a\u0627\u0628\u0639 darken \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0647\u0645\u0627\u0646\u0646\u062f \u062a\u0627\u0628\u0639 lighten \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u0628\u0627 \u0627\u06cc\u0646 \u062a\u0641\u0627\u0648\u062a \u06a9\u0647 \u0645\u06cc\u0632\u0627\u0646 \u062f\u0631\u0635\u062f \u0648\u0627\u0631\u062f \u0634\u062f\u0647\u060c \u0645\u0642\u062f\u0627\u0631 \u062a\u06cc\u0631\u0647 \u062a\u0631 \u0634\u062f\u0646 \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n    background: darken(#800, 20%);\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc css \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background: #220000;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0627\u0628\u0639 grayscale \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0631\u0646\u06af \u0633\u06cc\u0627\u0647 \u0633\u0641\u06cc\u062f \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f. \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631\u0635\u062f \u0631\u0646\u06af \u0633\u0641\u06cc\u062f \u06cc\u0627 \u0631\u0646\u06af \u0633\u06cc\u0627\u0647 \u062f\u0631 \u0622\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0633\u062a\u060c \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0628\u0647 \u0633\u06cc\u0627\u0647 \u06cc\u0627 \u0633\u0641\u06cc\u062f \u0648\u06cc\u0627 \u062e\u0627\u06a9\u0633\u0631\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u0631\u0646\u06af \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n    background: grayscale(lightblue)\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc css \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background: #cacaca;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0627\u0628\u0639 round\u060c \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0639\u062f\u062f \u0627\u0639\u0634\u0627\u0631\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0646\u0632\u062f\u06cc\u06a9 \u0639\u062f\u062f \u0635\u062d\u06cc\u062d \u0628\u0647 \u0622\u0646 \u06af\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n    width: round(123.15)\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc css \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  width: 123;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">Sass \u062a\u0648\u0627\u0628\u0639 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647\u200c\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647\u200c\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u062f\u0627\u0631\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0645\u06cc\u062a\u0648\u200c\u0627\u0646 \u0628\u0647 \u062a\u0648\u0627\u0628\u0639 ceil \u06a9\u0647 \u0639\u062f\u062f \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u06af\u0631\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c floor \u06a9\u0647 \u0639\u062f\u062f \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u067e\u0627\u06cc\u06cc\u0646 \u06af\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c random \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0646 sass \u06cc\u06a9 \u0639\u062f\u062f \u0631\u0646\u062f\u0648\u0645 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f\u060c max \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0628\u0632\u0631\u06af\u062a\u0631\u06cc\u0646 \u0639\u062f\u062f \u0628\u06cc\u0646 \u0686\u0646\u062f \u0639\u062f\u062f \u0648 \u062f\u0631 \u0646\u0642\u0637\u0647 \u0645\u0642\u0627\u0628\u0644\u0634 min \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u06a9\u0648\u0686\u06a9\u062a\u0631\u06cc\u0646 \u0639\u062f\u062f \u0628\u06cc\u0646 \u0686\u0646\u062f \u0639\u062f\u062f\u060c abs \u06a9\u0647 \u0642\u062f\u0631 \u0645\u0637\u0644\u0642 \u0639\u062f\u062f \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f\u060c log \u06a9\u0647 \u0644\u06af\u0627\u0631\u06cc\u062a\u0645 \u0639\u062f\u062f\u062a\u0627\u0646 \u0631\u0627 \u062f\u0631 \u0645\u0628\u0646\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u06f2 \u0648 \u06cc\u0627 \u062f\u0631 \u0645\u0628\u0646\u0627\u06cc\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f\u060c pow \u06a9\u0647 \u0639\u062f\u062f \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0628\u0647 \u062a\u0648\u0627\u0646 \u0639\u062f\u062f \u062f\u06cc\u06af\u0631\u06cc \u0645\u06cc\u200c\u0631\u0633\u0627\u0646\u062f\u060c sqrt \u06a9\u0647 \u062c\u0630\u0631 \u0639\u062f\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0646\u0648\u0627\u0639 \u062a\u0648\u0627\u0628\u0639 \u0645\u062b\u0644\u062b\u0627\u062a\u06cc cos\u060c sin \u0648 tan \u0648 \u0633\u0627\u06cc\u0631 \u062a\u0648\u0627\u0628\u0639 \u0645\u062b\u0644\u062b\u0627\u062a\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 sass \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u06af\u0641\u062a\u0647 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">\/\/ceil\nbody {\n    width: ceil(123.2)\n}\n\n\/* css *\/\nbody {\n  width: 124;\n}\n\n\/\/floor\nbody {\n    width: floor(4.2)\n}\n\n\/* css *\/\nbody {\n  width: 4;\n}\n\n\/\/max\n$widths: 50px, 30px, 100px;\nbody {\n  width: max($widths...);\n}\n\n\/* css *\/\nbody {\n  width: 100px;\n}\n\n\/\/min\n$widths: 50px, 30px, 100px;\nbody {\n  width: min($widths...);\n}\n\n\/* css *\/\nbody {\n  width: 30px;\n}\n\n\/\/abs\nbody {\n  width: abs(-10px);\n}\n\n\/* css *\/\nbody {\n  width: 10px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u062e\u0634\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 sass \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647\u200c\u06cc \u0644\u06cc\u0633\u062a \u06a9\u0627\u0645\u0644 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 <a style=\"color: #000000;\" href=\"https:\/\/sass-lang.com\/documentation\/modules\/math\/\" rel=\"nofollow noopener\" target=\"_blank\">\u0622\u062f\u0631\u0633<\/a> \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0644\u06cc\u0633\u062a \u062a\u0645\u0627\u0645\u06cc \u062a\u0648\u0627\u0628\u0639 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644\u06cc \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0646\u06af\u0627\u0647 \u0627\u0648\u0644 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062e\u06cc\u0644\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u06af\u0641\u062a\u0647 \u0634\u062f\u0647 \u0628\u0647 \u06a9\u0627\u0631\u062a\u0627\u0646 \u0646\u06cc\u0627\u06cc\u062f \u0648 \u06cc\u0627 \u062f\u0631 \u0645\u0648\u0627\u0631\u062f \u062e\u0627\u0635 \u0628\u0647 \u06a9\u0627\u0631\u062a\u0627\u0646 \u0622\u06cc\u062f\u060c \u0627\u0645\u0627 \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u062a\u0648\u0627\u0628\u0639 \u0648 \u062f\u0627\u0646\u0633\u062a\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062a\u0648\u0627\u0628\u0639\u06cc \u0627\u0632 \u067e\u06cc\u0634 \u062f\u0631 sass \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u0645\u060c \u062f\u0631 \u06a9\u0646\u0627\u0631 \u062a\u0648\u0627\u0628\u0639 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647\u060c \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u0628\u0639 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f\u062a\u0627\u0646 \u0631\u0627 \u0646\u06cc\u0632 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0631\u0648\u0634\u0646 \u06a9\u0631\u062f\u0646 \u0631\u0646\u06af\u200c\u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646\u060c \u0627\u0632 \u062a\u0627\u0628\u0639 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u06cc \u062e\u0648\u062f sass \u0628\u0647 \u0646\u0627\u0645 lighten \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 return \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0646\u0627\u0645 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631 \u0648\u0631\u0648\u062f\u06cc \u0628\u0647 \u0622\u0646 \u0628\u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$primary-color: #333;\n\n@function light_color($arg) {\n  @return lighten($arg, 50%);\n}\n\nbody {\n  background: light_color($primary-color);\n  color: $primary-color;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc css \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">body {\n  background: #b3b3b3;\n  color: #333333;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0639\u062f\u06cc \u06a9\u0647 \u0627\u0632 sass \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0634\u0631\u0637\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0634\u0631\u0637\u06cc \u06a9\u0647 \u0647\u0645\u0627\u0646 if else \u0645\u06cc \u0628\u0627\u0634\u062f \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0632\u0628\u0627\u0646 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u06cc\u06a9 \u0634\u0631\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0648\u062f\u060c \u0639\u0645\u0644\u06cc\u0627\u062a \u062e\u0627\u0635\u06cc \u0627\u0646\u062c\u0627\u0645 \u06af\u06cc\u0631\u062f \u0648 \u06cc\u0627 \u0627\u06af\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0648\u062f\u060c \u0639\u0645\u0644\u06cc\u0627\u062a \u062f\u06cc\u06af\u0631\u06cc \u0635\u0648\u0631\u062a \u06af\u06cc\u0631\u062f. \u062f\u0631 sass \u0646\u06cc\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u06a9\u0645\u06a9 \u0628\u0632\u0631\u06af\u06cc \u062f\u0631 \u0628\u0647\u06cc\u0646\u0647 \u062a\u0631 \u0646\u0648\u0634\u062a\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0631 sass \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631 @if \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0631\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062f\u060c \u0634\u0639\u0627\u0639 \u0645\u0631\u0632 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u0647\u0645 \u06a9\u0647 \u0634\u0631\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0627\u0634\u062f\u060c \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u0647 \u0622\u0646 \u062a\u0639\u0644\u0642 \u0646\u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin avatar($size, $circle: false) {\n  width: $size;\n  height: $size;\n\n  @if $circle {\n    border-radius: $size \/ 2;\n  }\n}\n\n.square-av {\n  @include avatar(100px, $circle: false);\n}\n.circle-av {\n  @include avatar(100px, $circle: true);\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.square-av {\n  width: 100px;\n  height: 100px;\n}\n\n.circle-av {\n  width: 100px;\n  height: 100px;\n  border-radius: 50px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 @if\u060c \u062f\u0633\u062a\u0648\u0631 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 @else \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0631\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0627\u0634\u062f\u060c \u0648\u0627\u0631\u062f \u0622\u0646 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 $light-theme \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 true \u0628\u0627\u0634\u062f\u060c \u0648\u0627\u0631\u062f \u0634\u0631\u0637 @if \u0645\u06cc \u0634\u0648\u062f \u0648 \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631 $light-background \u0648 \u0631\u0646\u06af \u0631\u0627 \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631 $light-text \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062f\u0648 \u0645\u062a\u063a\u06cc\u0631 \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$light-background: #f2ece4;\n$light-text: #036;\n$dark-background: #6b717f;\n$dark-text: #d2e1dd;\n\n@mixin theme-colors($light-theme: true) {\n  @if $light-theme {\n    background-color: $light-background;\n    color: $light-text;\n  } @else {\n    background-color: $dark-background;\n    color: $dark-text;\n  }\n}\n\n.banner {\n  @include theme-colors($light-theme: true);\n  body.dark &amp; {\n    @include theme-colors($light-theme: false);\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.banner {\n  background-color: #f2ece4;\n  color: #036;\n}\nbody.dark .banner {\n  background-color: #6b717f;\n  color: #d2e1dd;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u062f\u06cc\u06af\u0631\u060c \u0634\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u0686\u0646\u062f \u0634\u0631\u0637 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u062f\u06cc\u0646 \u0635\u0648\u0631\u062a \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0631\u0637 \u0627\u0648\u0644 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0648\u062f\u060c \u0634\u0631\u0637 \u062f\u0648\u0645 \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0622\u0646 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0648\u062f\u060c \u0634\u0631\u0637 \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u062a\u0627 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u06cc\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0634\u0631\u0637 \u0647\u0627 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062f \u0648 \u06cc\u0627 \u0647\u06cc\u0686\u06a9\u062f\u0627\u0645 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0627\u0634\u0646\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 $direction \u062f\u0631 \u0634\u0631\u0637 \u0647\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0631\u0637 \u0627\u0648\u0644 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062e\u0644 \u0634\u0631\u0637 \u0627\u0648\u0644 \u0628\u0647 \u0627\u0644\u0645\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0631\u0637 \u0627\u0648\u0644 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0627\u0634\u062f\u060c \u0634\u0631\u0637 \u062f\u0648\u0645 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u0627 \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0622\u062e\u0631\u06cc \u0634\u0631\u0637 \u0631\u0627 \u0686\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u06af\u0631 \u0647\u06cc\u0686 \u06a9\u062f\u0648\u0645 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0628\u0627\u0634\u062f\u060c \u0648\u0627\u0631\u062f @else \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@mixin triangle($size, $color, $direction) {\n  height: 0;\n  width: 0;\n\n  border-color: transparent;\n  border-style: solid;\n  border-width: $size \/ 2;\n\n  @if $direction == up {\n    border-bottom-color: $color;\n  } @else if $direction == right {\n    border-left-color: $color;\n  } @else if $direction == down {\n    border-top-color: $color;\n  } @else if $direction == left {\n    border-right-color: $color;\n  } @else {\n    @error \"Unknown direction #{$direction}.\";\n  }\n}\n\n.next {\n  @include triangle(5px, black, right);\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.next {\n  height: 0;\n  width: 0;\n  border-color: transparent;\n  border-style: solid;\n  border-width: 2.5px;\n  border-left-color: black;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0634\u0631\u0637\u06cc \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0633\u0627\u062f\u06af\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0627\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0647\u0633\u062a\u0646\u062f \u0648 \u062f\u0631 sass \u0628\u0633\u06cc\u0627\u0631 \u0645\u0648\u0631\u062f \u06a9\u0627\u0631\u0628\u0631\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0639\u062f\u06cc \u062f\u0631 sass\u060c @each \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0648 \u06cc\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f:\u0645\u0642\u062f\u0627\u0631 \u0628\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0646\u0648\u0639\u06cc \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0628\u0632\u0646\u06cc\u062f \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0645\u062b\u0627\u0644\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 \u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0631 \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0647\u0631 \u0628\u0627\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u0639\u0636\u0627\u06cc \u0644\u06cc\u0633\u062a $sizes \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062d\u0644\u0642\u0647\u200c\u06cc @each \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$sizes: 40px, 50px, 80px;\n\n@each $size in $sizes {\n  .icon-#{$size} {\n    font-size: $size;\n    height: $size;\n    width: $size;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.icon-40px {\n  font-size: 40px;\n  height: 40px;\n  width: 40px;\n}\n\n.icon-50px {\n  font-size: 50px;\n  height: 50px;\n  width: 50px;\n}\n\n.icon-80px {\n  font-size: 80px;\n  height: 80px;\n  width: 80px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u062b\u0627\u0644 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 @each \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@each $animal in puma, sea-slug, egret, salamander {\n  .#{$animal}-icon {\n    background-image: url(\"\/images\/#{$animal}.png\");\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.puma-icon {\n  background-image: url(\"\/images\/puma.png\");\n}\n.sea-slug-icon {\n  background-image: url(\"\/images\/sea-slug.png\");\n}\n.egret-icon {\n  background-image: url(\"\/images\/egret.png\");\n}\n.salamander-icon {\n  background-image: url(\"\/images\/salamander.png\");\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0639\u062f\u06cc \u062f\u0631 sass\u060c @for \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u0634\u062e\u0635\u06cc \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0627\u0632\u0647\u200c\u06cc \u0645\u0634\u062e\u0635 \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0648 \u06cc\u0627 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0627\u062e\u0644\u06cc @for \u0628\u062f\u0647\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0645\u062a\u063a\u06cc\u0631 $i \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0632 \u06f1 \u062a\u0627 \u06f3 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0647\u0631 \u0628\u0627\u0631 \u0627\u062c\u0631\u0627\u06cc \u062d\u0644\u0642\u0647\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062f\u0631 \u0645\u06a9\u0627\u0646 \u0622\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$base-color: #036;\n\n@for $i from 1 through 3 {\n  ul:nth-child(3n + #{$i}) {\n    background-color: lighten($base-color, $i * 5%);\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">ul:nth-child(3n + 1) {\n  background-color: #004080;\n}\n\nul:nth-child(3n + 2) {\n  background-color: #004d99;\n}\n\nul:nth-child(3n + 3) {\n  background-color: #0059b3;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0628\u0631\u0627\u06cc @for \u0627\u0632 \u06a9\u0644\u0645\u0647 through \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06a9\u0644\u0645\u0647 \u0645\u0648\u062c\u0628 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0647\u0645 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0648 \u0647\u0645 \u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631 \u062d\u0644\u0642\u0647 \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u062f. \u06cc\u0639\u0646\u06cc \u0639\u062f\u062f \u06f1\u060c \u06f2 \u0648 \u06f3. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 through \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u062a\u0627 \u0634\u0645\u0627 \u0627\u0632 \u0627\u0648\u0644\u06cc\u0646 \u0639\u062f\u062f \u0628\u0627\u0632\u0647 \u062a\u0627 \u06cc\u06a9\u06cc \u0642\u0628\u0644 \u0627\u0632 \u0622\u062e\u0631\u06cc\u0646 \u0646\u06cc\u0632 \u062d\u0644\u0642\u0647 \u062a\u06a9\u0631\u0627\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 \u06a9\u0644\u06cc \u0648\u0627\u0698\u0647\u200c\u06cc to \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@for $i from 1 to 3 {\n  .item-#{$i} {\n    width: 2em * $i;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.item-1 {\n  width: 2em;\n}\n\n.item-2 {\n  width: 4em;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0639\u062f\u06cc \u062f\u0631 sass\u060c \u0642\u0627\u0628\u0644\u06cc\u062a @while \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644 sass \u0648 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0648 \u06cc\u0627 \u06cc\u06a9 mixin\u060c \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 \u0634\u0631\u0637\u06cc \u0628\u0631\u0642\u0631\u0627\u0631 \u0627\u0633\u062a\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0627\u062e\u0644\u06cc \u0622\u0646 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 $value \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 $base \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627\u0634\u062f\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0627\u062e\u0644\u06cc @while \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">\/\/\/ Divides `$value` by `$ratio` until it's below `$base`.\n@function scale-below($value, $base, $ratio: 1.618) {\n  @while $value &gt; $base {\n    $value: $value \/ $ratio;\n  }\n  @return $value;\n}\n\n$normal-font-size: 16px;\nsup {\n  font-size: scale-below(20px, 16px);\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u0641\u0627\u06cc\u0644 sass \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">sup {\n  font-size: 12.36094px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0622\u062e\u0631\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc \u062f\u0631 sass\u060c @media \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0647\u0645\u0627\u0646\u0646\u062f @media \u062f\u0631 css \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u062f\u0631 \u06a9\u062f \u067e\u0627\u06cc\u06cc\u0646 \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 sass \u0627\u0632 @media \u062c\u0647\u062a \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0627\u0628\u0639\u0627\u062f \u062e\u0627\u0635 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.sidebar {\n  width: 300px;\n  @media screen and (orientation: landscape) {\n    width: 500px;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.sidebar {\n  width: 300px;\n}\n@media screen and (orientation: landscape) {\n  .sidebar {\n    width: 500px;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627\u06cc media \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062f\u06cc\u06af\u0631 \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@media screen {\n  .sidebar {\n    @media (orientation: landscape) {\n      width: 500px;\n    }\n  }\n}\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@media screen and (orientation: landscape) {\n  .sidebar {\n    width: 500px;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631 \u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @media \u062f\u0631 sass\u060c \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u060c \u062a\u0648\u0627\u0628\u0639 \u0648 \u062a\u0645\u0627\u0645\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0630\u06a9\u0631 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc sass \u062f\u0631 \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627\u06cc @media \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">$media: screen;\n$feature: -webkit-min-device-pixel-ratio;\n$value: 1.5;\n\n@media #{$media} and ($feature: $value) {\n  .sidebar {\n    width: 500px;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">@media screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sidebar {\n    width: 500px;\n  }\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0628\u062d\u062b @media \u0622\u062e\u0631\u06cc\u0646 \u0645\u0628\u062d\u062b \u0627\u0632 \u062f\u0648\u0631\u0647 <strong>\u0622\u0645\u0648\u0632\u0634 sass<\/strong> \u0628\u0648\u062f. sass \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0648 \u062f\u0631 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0627 css \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f. \u062d\u062a\u0645\u0627 \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0628\u0647 \u0633\u0627\u06cc\u062a sass \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0627\u06a9\u06cc\u0648\u0645\u0646\u062a \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0628\u0631 \u0631\u0648\u06cc \u0633\u0627\u06cc\u062a \u0631\u0627 \u0645\u0637\u0627\u0644\u0639\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0633\u0639\u06cc \u0634\u062f \u0628\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 sass \u06a9\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f\u060c \u062a\u0645\u0631\u06a9\u0632 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u0686\u0631\u0627 \u0628\u0647 \u0622\u0645\u0648\u0632\u0634 sass \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 Sass \u06cc\u06a9 \u067e\u06cc\u0634\u200c\u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 \u06cc\u0627 \u0627\u0635\u0637\u0644\u0627\u062d\u0627 preproccesor \u0628\u0631\u0627\u06cc css \u0627\u0633\u062a. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 sass \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0648\u0627\u0628\u0639\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0648 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627 \u0648 \u0636\u0639\u0641 \u0647\u0627\u06cc css \u0648 \u062a\u06a9\u0631\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f \u062f\u0631 css \u0631\u0627 \u0631\u0641\u0639 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":7007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-6824","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/6824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=6824"}],"version-history":[{"count":5,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/6824\/revisions"}],"predecessor-version":[{"id":67389,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/6824\/revisions\/67389"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/7007"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=6824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=6824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=6824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}