{"id":5561,"date":"2021-03-16T13:09:35","date_gmt":"2021-03-16T13:09:35","guid":{"rendered":"http:\/\/www.scmgalaxy.com\/tutorials\/?p=5561"},"modified":"2021-03-17T06:09:32","modified_gmt":"2021-03-17T06:09:32","slug":"sass-tutorial-for-beginners","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/","title":{"rendered":"SASS tutorial for Beginners"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">SASS is preprocessor of CSS, we can also refer it as CSS with superpower. SASS stands for Syntactically Awesome Style Sheets.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To save the file in SASS format we need to add .scss extension in the file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here we will learn how to use SASS in Visual Studio Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Initially in VSC we need to make a basic html file naming index.html and a folder for SASS naming sass. <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/15f43ba18c2672a21de4a2f5efd96f0b.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Inside the sass folder we need to create a file naming main.scss.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before executing the file we need to install an extension in our Visual Studio Code named as &#8220;Live Sass Compiler&#8221; which is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"763\" height=\"196\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg\" alt=\"\" class=\"wp-image-5562\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg 763w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-300x77.jpg 300w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once we install the extension we can see an option Live Sass in the status bar of Visual Studio Code, we need to click on that to make the Sass live.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"26\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-2.jpg\" alt=\"\" class=\"wp-image-5564\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-2.jpg 728w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-2-300x11.jpg 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If the status changes to &#8220;watching&#8221; automatically we can see that in the Scss folder main.css and main.css.map files are created.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now whatever code we execute in main.scss it will be imported automatically to the main.css file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also we have to pay attention in linking the css script with the html file, as we will not link main.scss file in the html rather we will link main.css file in the html file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we can start styling our file in main.scss and automatically all the codes will be imported in main.css and if it requires any conversion for being compatible with browser it will convert the codes automatically and make it compatible.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Key features of Sass which make it better than CSS is we can use :-<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">&#8211; Operators<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8211; Variables<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">-Nesting<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">-Mixin<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">-Parameter<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">-Partials<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It make it convenient for us to execute complicated codes very easily with these features.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we will see the features in details:-<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Operators <\/strong>&#8211; We can use operators in Scss as shown below:<\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/2aad2bf91cedcfd32bd9615c85ec4f12.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">And if we see the same code in main.css we will see the actual values without the operators:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/414eba134b02dd4f39c95d67789587bb.js\"><\/script>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Variables <\/strong>&#8211; We can use variables in scss as shown below:<\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/647b8ed8e2b80f69e315e13e56f8aef2.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Here we can see that we have declared a variable named as $bg-color and we have assigned a color to it and we can assign the same variable where we want to use that color.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Nesting <\/strong>&#8211; We can use nesting in scss as shown below:<\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/a9cab6862b8ddefa6d8c3d8f365b8c1d.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Here we can see that inside the class main_header itself we have assigned the values for &lt;h1> and &lt;h2>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Mixin <\/strong>&#8211; We can use mixin in scss as shown below:<\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/1c525b68fc8441cbf5fe954ea01b7104.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">With the help of mixin feature we can use a set of codes which is suppose to be used number of times in the project, we can assign that set of codes under @mixin file name{} and we can just use the name with @include in the front wherever we want to add those codes.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Parameter<\/strong> &#8211; We can use parameter in scss as shown below:<\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/9f317facd2f425bd087d0a0928039ae4.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">In this feature we can use parameters under the mixin feature. In the Line 16 we can see that we have created a mixin named as &#8220;name2&#8221; in which we have assigned a parameter &#8220;$rem&#8221; which is assigned in &#8220;letter-spacing&#8221; and we have called that parameter in the line 31 and 38 by giving it a value of &#8220;1rem&#8221;. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Similarly we can pass number of parameters to make some changes in the codes which are under the &#8220;mixin&#8221;.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Partials<\/strong> &#8211; In partials we can make our scss file less complex by making separate files for variables and mixin and then importing those files in the main scss. By this way we can easily make any changes in the mixin and variable without any complexity.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We need to keep one thing in mind that we have to use &#8220;_&#8221; while creating the partial files for &#8216;mixin&#8217; and &#8216;variables&#8217; so that it does not make any issue with the main scss file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can see the example below:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">_mixin.scss:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/e5dec44b06118e34cc8f10d475f5aa9c.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">_variable.scss:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/222f72db5fadb57eb1767837b1a2ba4f.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">main.scss:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/a874566f6a3ad6b6afec9936b8065793.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Index.html:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/ea6053bff5da159b08aefbd6600931b9.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">main.css:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Joydeep-cotocus\/dbba6f88bc519b1cf2494377f8adee59.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">This is the codes for all the files and we can see the following output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-3-1024x472.jpg\" alt=\"\" class=\"wp-image-5584\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-3-1024x472.jpg 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-3-300x138.jpg 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-3-768x354.jpg 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture-3.jpg 1346w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To know more about SASS you can refer the video given below:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\"  id=\"_ytid_42653\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\" src=\"https:\/\/www.youtube.com\/embed\/tEQOdFgUXI4?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>SASS is preprocessor of CSS, we can also refer it as CSS with superpower. SASS stands for Syntactically Awesome Style [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[453,5123],"tags":[5134,4459,5132],"class_list":["post-5561","post","type-post","status-publish","format-standard","hentry","category-programming-scripting-languages","category-sass","tag-css","tag-html","tag-scss"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SASS tutorial for Beginners - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SASS tutorial for Beginners - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"SASS is preprocessor of CSS, we can also refer it as CSS with superpower. SASS stands for Syntactically Awesome Style [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-16T13:09:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-17T06:09:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg\" \/>\n<meta name=\"author\" content=\"Joydeep M\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joydeep M\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/\"},\"author\":{\"name\":\"Joydeep M\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/8a2c0533775223a96dd307662111bac6\"},\"headline\":\"SASS tutorial for Beginners\",\"datePublished\":\"2021-03-16T13:09:35+00:00\",\"dateModified\":\"2021-03-17T06:09:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/\"},\"wordCount\":699,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Capture.jpg\",\"keywords\":[\"css\",\"HTML\",\"scss\"],\"articleSection\":[\"Programming Scripting Languages\",\"sass\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/\",\"name\":\"SASS tutorial for Beginners - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Capture.jpg\",\"datePublished\":\"2021-03-16T13:09:35+00:00\",\"dateModified\":\"2021-03-17T06:09:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/8a2c0533775223a96dd307662111bac6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Capture.jpg\",\"contentUrl\":\"http:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Capture.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/sass-tutorial-for-beginners\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SASS tutorial for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/8a2c0533775223a96dd307662111bac6\",\"name\":\"Joydeep M\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fb490db5d492c960456cc628f9e832fda72c5bc426cd8a13b18cbb95bca7ce99?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fb490db5d492c960456cc628f9e832fda72c5bc426cd8a13b18cbb95bca7ce99?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fb490db5d492c960456cc628f9e832fda72c5bc426cd8a13b18cbb95bca7ce99?s=96&d=mm&r=g\",\"caption\":\"Joydeep M\"},\"description\":\"An investment in knowledge pays the best interest.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/joydeep-kumar-538412208\\\/\"],\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/joydeep\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SASS tutorial for Beginners - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"SASS tutorial for Beginners - scmGalaxy","og_description":"SASS is preprocessor of CSS, we can also refer it as CSS with superpower. SASS stands for Syntactically Awesome Style [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/","og_site_name":"scmGalaxy","article_published_time":"2021-03-16T13:09:35+00:00","article_modified_time":"2021-03-17T06:09:32+00:00","og_image":[{"url":"http:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg","type":"","width":"","height":""}],"author":"Joydeep M","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joydeep M","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/"},"author":{"name":"Joydeep M","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/8a2c0533775223a96dd307662111bac6"},"headline":"SASS tutorial for Beginners","datePublished":"2021-03-16T13:09:35+00:00","dateModified":"2021-03-17T06:09:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/"},"wordCount":699,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#primaryimage"},"thumbnailUrl":"http:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg","keywords":["css","HTML","scss"],"articleSection":["Programming Scripting Languages","sass"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/","name":"SASS tutorial for Beginners - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#primaryimage"},"thumbnailUrl":"http:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg","datePublished":"2021-03-16T13:09:35+00:00","dateModified":"2021-03-17T06:09:32+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/8a2c0533775223a96dd307662111bac6"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#primaryimage","url":"http:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg","contentUrl":"http:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/03\/Capture.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/sass-tutorial-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"SASS tutorial for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/8a2c0533775223a96dd307662111bac6","name":"Joydeep M","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/fb490db5d492c960456cc628f9e832fda72c5bc426cd8a13b18cbb95bca7ce99?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fb490db5d492c960456cc628f9e832fda72c5bc426cd8a13b18cbb95bca7ce99?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fb490db5d492c960456cc628f9e832fda72c5bc426cd8a13b18cbb95bca7ce99?s=96&d=mm&r=g","caption":"Joydeep M"},"description":"An investment in knowledge pays the best interest.","sameAs":["https:\/\/www.linkedin.com\/in\/joydeep-kumar-538412208\/"],"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/joydeep\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=5561"}],"version-history":[{"count":3,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5561\/revisions"}],"predecessor-version":[{"id":5586,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5561\/revisions\/5586"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=5561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=5561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=5561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}