{"id":17302,"date":"2020-11-28T21:33:33","date_gmt":"2020-11-28T13:33:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17302"},"modified":"2020-11-28T19:59:00","modified_gmt":"2020-11-28T11:59:00","slug":"convert-css-to-sass","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/","title":{"rendered":"Web Design: How to Convert CSS to Sass &amp; SCSS"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS<\/a> is a really simple and straightforward language, but when it is getting too long \u2013 let\u2019s say for a thousand of lines, it turns into a maintenance \u2018nightmare\u2019. Everything will be too complicated to maintain, and we will get lost with which style rules to keep up with or overwrite. For that reason, a <a href=\"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\">CSS Pre-processor<\/a> is created to make writing CSS programmable and more maintainable.<\/p>\n<p>One that is popular among developers and designers is <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/sass\/\">Sass<\/a>, which we have covered previously in posts like:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\">Getting Started With Sass: Installation And The Basics<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/saas-compass\/\">Syntactically Awesome Stylesheets: Using Compass In Sass<\/a><a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\"><\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\">CSS Preprocessors Compared: Sass Vs. LESS<\/a><\/li>\n<\/ul>\n<p>If you have just made the swap from CSS to Sass, you might be thinking to convert your old CSS into Sass or SCSS. Well, if that is the case, you can use a third-party tool called <a href=\"https:\/\/css2sass.herokuapp.com\/\" rel=\"nofollow\">css2sass<\/a>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-to-less\/\" class=\"ref-block__link\" title=\"Read More: How to Convert Old CSS to LESS\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Convert Old CSS to LESS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-to-less.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15196 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-to-less.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Convert Old CSS to LESS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tWe have covered much of the basics for LESS in our previous posts. If you have been following...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Using CSS2SASS<\/h2>\n<p>This tool is simple and intuitive \u2013 I might not even have to tell you how to use it but, for demonstration purpose, we will run a few tests with the tool. First, given the following CSS codes:<\/p>\n<pre>\r\nheader .nav {\r\n  margin-top: 100px;\r\n}\r\nheader .nav li {\r\n  margin-left: 10px;\r\n}\r\nheader .nav li a {\r\n  height: 30px;\r\n  line-height: 10px;\r\n}\r\n<\/pre>\n<p>We would like to convert it into Sass syntax, which is turned into:<\/p>\n<pre>\r\nheader .nav\r\n  margin-top: 100px\r\n  li\r\n    margin-left: 10px\r\n    a\r\n      height: 30px\r\n      line-height: 10px\r\n<\/pre>\n<p>The style rules are now nested under preceding selectors using indentation to distinct the <a href=\"https:\/\/www.hongkiat.com\/blog\/css-priority-level\/\">cascading level<\/a>. If we convert it into SCSS syntax the cascade will be differentiated with curly brackets, just like in CSS.<\/p>\n<h3>The Same Style Rules<\/h3>\n<p>Let\u2019s give it another try. This time, we have the following two selectors with the exact same style rules, and we will covert it into Sass syntax.<\/p>\n<pre>\r\n.footer {\r\n  color: #b3b3b3;\r\n  background-color: #fafafa;\r\n}\r\n.copy {\r\n  color: #b3b3b3;\r\n  background-color: #fafafa;\r\n}\r\n<\/pre>\n<p>The generated output is quite clever, this tool concatenate the selectors in a single line, and separate them using a comma, as follows.<\/p>\n<pre>\r\n.footer, .copy\r\n  color: #b3b3b3\r\n  background-color: #fafafa\r\n<\/pre>\n<p>Although, this is not what I\u2019ve actually expected. It would be better if the output was in <a href=\"https:\/\/chriseppstein.github.io\/blog\/2010\/08\/02\/sass-extend-challenge\/\">Selector Inheritance<\/a>, probably to be something like in the code below.<\/p>\n<pre>\r\n.inherit1\r\n  color: #b3b3b3\r\n  background-color: #fafafa\r\n.footer\r\n  @extend .inherit1\r\n.copy  \r\n  @extend .inherit1\r\n<\/pre>\n<h3>Pseudo-class and Selector Combination<\/h3>\n<p>Lastly, we would like to try converting some style rules with <code>:hover<\/code> <em>pseudo-class<\/em> and the selector combination, as shown below.<\/p>\n<pre>\r\n.button:hover {\r\n  color: #ffffff;\r\n  background-color: #bf813d;\r\n}\r\n.button.active {\r\n  background-color: #986731;\r\n}\r\n<\/pre>\n<p>The output is as expected. This tool nests the <em>pseudo-class<\/em> and the selector combination with <code>&<\/code> sign, like so.<\/p>\n<pre>\r\n.button\r\n  &:hover\r\n    color: #ffffff\r\n    background-color: #bf813d\r\n  &.active\r\n    background-color: #986731\r\n<\/pre>\n<h2>Room for Improvement<\/h2>\n<p>This tool has some limitations in recognizing our CSS cascading structure to convert them appropriately into Sass or SCSS syntax. But, there is certainly room for improvement.<\/p>\n<p>I am not quite sure whether it is possible to integrate <a href=\"http:\/\/compass-style.org\/\">Compass<\/a> to this conversion tool. It would be just great, if we were able to convert the following CSS3 <code>@font-face<\/code> rule:<\/p>\n<pre>\r\n@font-face {\r\n  font-family: \"DroidSansRegular\";\r\n  src: url(\"fonts\/DroidSans-webfont.eot\");\r\n  src: url(\"fonts\/DroidSans-webfont.eot?#iefix\") format(\"embedded-opentype\"), url(\"fonts\/DroidSans-webfont.woff\") format(\"woff\"), url(\"fonts\/DroidSans-webfont.ttf\") format(\"truetype\"), url(\"fonts\/DroidSans-webfont.svg#DroidSansRegular\") format(\"svg\");\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}\r\n<\/pre>\n<p>\u2026into Compass <code>@font-face<\/code> mixin, as follows<\/p>\n<pre>\r\n@include font-face(\"DroidSansRegular\", font-files(\"DroidSansRegular-webfont.ttf\", \"DroidSansRegular-webfont.otf\", \"DroidSansRegular-webfont.woff\"), \"DroidSansRegular-webfont.eot\", normal);\r\n<\/pre>\n<p>But, in general this tool is one of a many good places for those who are just getting started with Sass. Convert your old CSS and you will see how it is constructed in Sass or SCSS syntax.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS is a really simple and straightforward language, but when it is getting too long \u2013 let\u2019s say for a thousand of lines, it turns into a maintenance \u2018nightmare\u2019. Everything will be too complicated to maintain, and we will get lost with which style rules to keep up with or overwrite. For that reason, a&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,2190],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Convert CSS to Sass and SCSS For Web Designers<\/title>\n<meta name=\"description\" content=\"CSS is a really simple and straightforward language, but when it is getting too long &ndash; let&#039;s say for a thousand of lines, it turns into a\" \/>\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.hongkiat.com\/blog\/convert-css-to-sass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design: How to Convert CSS to Sass &amp; SCSS\" \/>\n<meta property=\"og:description\" content=\"CSS is a really simple and straightforward language, but when it is getting too long &ndash; let&#039;s say for a thousand of lines, it turns into a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-28T13:33:33+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Web Design: How to Convert CSS to Sass &amp; SCSS\",\"datePublished\":\"2020-11-28T13:33:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/\"},\"wordCount\":484,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"sass\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/\",\"name\":\"How to Convert CSS to Sass and SCSS For Web Designers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2020-11-28T13:33:33+00:00\",\"description\":\"CSS is a really simple and straightforward language, but when it is getting too long &ndash; let's say for a thousand of lines, it turns into a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/convert-css-to-sass\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design: How to Convert CSS to Sass &amp; SCSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Convert CSS to Sass and SCSS For Web Designers","description":"CSS is a really simple and straightforward language, but when it is getting too long &ndash; let's say for a thousand of lines, it turns into a","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.hongkiat.com\/blog\/convert-css-to-sass\/","og_locale":"en_US","og_type":"article","og_title":"Web Design: How to Convert CSS to Sass &amp; SCSS","og_description":"CSS is a really simple and straightforward language, but when it is getting too long &ndash; let's say for a thousand of lines, it turns into a","og_url":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-11-28T13:33:33+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Web Design: How to Convert CSS to Sass &amp; SCSS","datePublished":"2020-11-28T13:33:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/"},"wordCount":484,"commentCount":18,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","sass"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/","url":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/","name":"How to Convert CSS to Sass and SCSS For Web Designers","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2020-11-28T13:33:33+00:00","description":"CSS is a really simple and straightforward language, but when it is getting too long &ndash; let's say for a thousand of lines, it turns into a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design: How to Convert CSS to Sass &amp; SCSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4v4","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17302"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17302\/revisions"}],"predecessor-version":[{"id":52686,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17302\/revisions\/52686"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17302"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}