{"id":15397,"date":"2012-11-07T21:01:25","date_gmt":"2012-11-07T13:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15397"},"modified":"2025-04-04T01:14:01","modified_gmt":"2025-04-03T17:14:01","slug":"getting-started-saas","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/","title":{"rendered":"Getting Started with Sass: Installation and the Basics"},"content":{"rendered":"<p>In this post, we are going to discuss a CSS Preprocessor called <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> or <strong>Syntactically Awesome Stylesheets<\/strong>.<\/p>\n<p>If you have been following our previous posts on <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/less\/\">LESS<\/a>, we are sure that you are familiar with the <strong>CSS Preprocessor<\/strong>. Both <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> and <a href=\"https:\/\/lesscss.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">LESS<\/a> are CSS Preprocessors which primarily extend the way we compose plain-static-CSS in more dynamic way using programming languages like Variables, Mixins, and Functions.<\/p>\n<h2>Installing Sass<\/h2>\n<p>Before we can compose Sass we need to install it. <strong>Sass is built upon <a href=\"https:\/\/www.ruby-lang.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ruby<\/a><\/strong>. If you are working on a Mac, chances are, you already have Ruby installed. If you may to install Ruby in Windows, use this <a href=\"https:\/\/rubyinstaller.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ruby Installer<\/a>.<\/p>\n<p>After the installation is complete, you can go to <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/terminal\/\">Terminal<\/a> (on a Mac) or in Command Prompt (on Windows) then type the following command line in it:<\/p>\n<p><strong>On Mac<\/strong>;<\/p>\n<pre>\r\nsudo gem install sass\r\n<\/pre>\n<p><strong>On Windows<\/strong>;<\/p>\n<pre>\r\ngem install sass\r\n<\/pre>\n<p>If the installation succeeds, you will have the following notification in your Terminal\/Command Prompt.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg\" alt=\"installing sass windows\" width=\"500\" height=\"162\"><\/figure>\n<p>Next, we need to select which directory for Sass to watch using the following command;<\/p>\n<pre>\r\nsass --watch path\/sass-directory\r\n<\/pre>\n<p>The command line above will watch every <code>.scss<\/code>\/<code>.sass<\/code> files in <code>path\/directory<\/code> and whenever one of the files in that directory is changed, Sass will update the corresponding files or create one if none exists.<\/p>\n<p>If we need Sass to generate the files in a specific directory, we can do it this way;<\/p>\n<pre>\r\nsass --watch path\/sass-directory:path\/css-directory\r\n<\/pre>\n<p>We can also watch a specific file rather than the directory, with this command line;<\/p>\n<pre>\r\nsass --watch path\/sass-directory\/styles.css\r\n<\/pre>\n<p>If the watch command succeeds, something like this notification below will appear in your Terminal\/Command Prompt.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/watch-command.jpg\" alt=\"watch command\" width=\"500\" height=\"138\"><\/figure>\n<p><strong>Further Reading<\/strong>: <a href=\"https:\/\/atom.io\/packages\/sass-autocompile\" target=\"_blank\" rel=\"noopener noreferrer\">Auto-Compile Sass Files with Sass 3<\/a><\/p>\n<h3>Sass Applications<\/h3>\n<p>However, if you hate working through Terminal or Command Prompt, you can use some applications for Sass. The free option is <a href=\"https:\/\/github.com\/mhs\/scout-app\" target=\"_blank\" rel=\"noopener noreferrer\">Scout<\/a>; it is built on Adobe Air so it can be run on all OS (Windows, OSX and Linux).<\/p>\n<p>However, it runs very slow as <a href=\"https:\/\/www.impressivewebs.com\/sass-on-windows-with-scout-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">some have previously reported.<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/sass-apps.jpg\" alt=\"sass apps\" width=\"500\" height=\"280\"><\/figure>\n<p>So if you don\u2019t have the patience for it, there are also some paid options. The price varies for each app, <a href=\"https:\/\/compass.kkbox.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Compass.app<\/a> goes for $10, <a href=\"https:\/\/fireapp.kkbox.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fire.app<\/a>, $14 and <a href=\"https:\/\/codekitapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Codekit<\/a> for $25.<\/p>\n<h2>Code Highlighting<\/h2>\n<p>Although Sass is primarily a <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS<\/a> extension, your current editor may not highlight the syntax properly. Fortunately, there are already some packages for almost any code editor to enable <code>.sass<\/code> or <code>.scss<\/code> code highlighting.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/sass-highlight.jpg\" alt=\"sass highlight\" width=\"500\" height=\"280\"><\/figure>\n<p>If you are working with Sublime Text 2 like I do, you can use these packages; Sublime Text HAML & Sass and <a href=\"https:\/\/github.com\/WhatWeDo\/Sublime-Text-2-SASS-Package\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Sublime Text 2 Sass Package<\/a>, and for an easier way, you can install one of these packages through Package Control.<\/p>\n<h2>Sass Language<\/h2>\n<p>Sass and LESS actually share some common languages, below are a few of them.<\/p>\n<h3>Variables<\/h3>\n<pre>\r\n$color-base: #000;\r\n$width: 100px;\r\n<\/pre>\n<p>The only difference from LESS variables is that the variable in Sass is defined with a <strong>$<\/strong> sign.<\/p>\n<h3>Nesting Rules<\/h3>\n<pre>\r\nheader {\r\n\twidth: 980px;\r\n\theight: 80px;\r\n\tnav {\r\n\t\tul { \r\n\t\t\tlist-style: none;\r\n\t\t\tpadding: none;\r\n\t\t\tmargin: none;\r\n\t\t}\r\n\t\tli {\r\n    \t\tdisplay: inline;\r\n\t\t\ta { \r\n\t\t\t\ttext-decoration: none; \r\n\t\t\t}\r\n  \t\t}\r\n  \t}\r\n}\r\n<\/pre>\n<h3>Mixins and Functions<\/h3>\n<pre>\r\n@mixin border-radius($radius) {\r\n  -moz-border-radius: $radius;\r\n  -webkit-border-radius: $radius;\r\n  -ms-border-radius: $radius;\r\n  border-radius: $radius;\r\n}\r\n<\/pre>\n<h3>Operations<\/h3>\n<pre>\r\nli {\r\n    width: $width\/5 - 10px;\r\n}\r\n<\/pre>\n<h3>Conditional Statement<\/h3>\n<pre>\r\n@if lightness($color-base) &gt;= 51% {\r\n\tbackground-color: #333333;\r\n} @else {\r\n\tbackground-color: #ffffff;\r\n}\r\n<\/pre>\n<p>In LESS you may do a similar thing via <a href=\"https:\/\/lesscss.org\/#-pattern-matching-and-guard-expressions\" target=\"_blank\" rel=\"noopener noreferrer\">Guard expression<\/a>, which we have covered about <a href=\"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">in this tutorial<\/a>.<\/p>\n<h2>Final Thought<\/h2>\n<p>And that\u2019s it. In the next post, we will start exploring the Sass languages and its companion, Compass. Stay tuned.<\/p>","protected":false},"excerpt":{"rendered":"<p>In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts on LESS, we are sure that you are familiar with the CSS Preprocessor. Both Sass and LESS are CSS Preprocessors which primarily extend the way we compose plain-static-CSS in more&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":[3392,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.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started with Sass: Installation and the Basics - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts\" \/>\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\/getting-started-saas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Sass: Installation and the Basics\" \/>\n<meta property=\"og:description\" content=\"In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\" \/>\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=\"2012-11-07T13:01:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:14:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg\" \/>\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\\\/getting-started-saas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Getting Started with Sass: Installation and the Basics\",\"datePublished\":\"2012-11-07T13:01:25+00:00\",\"dateModified\":\"2025-04-03T17:14:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/\"},\"wordCount\":507,\"commentCount\":51,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-saas\\\/installing-sass-on-windows.jpg\",\"keywords\":[\"CSS\",\"sass\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/\",\"name\":\"Getting Started with Sass: Installation and the Basics - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-saas\\\/installing-sass-on-windows.jpg\",\"datePublished\":\"2012-11-07T13:01:25+00:00\",\"dateModified\":\"2025-04-03T17:14:01+00:00\",\"description\":\"In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-saas\\\/installing-sass-on-windows.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-saas\\\/installing-sass-on-windows.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-saas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Sass: Installation and the Basics\"}]},{\"@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":"Getting Started with Sass: Installation and the Basics - Hongkiat","description":"In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts","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\/getting-started-saas\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Sass: Installation and the Basics","og_description":"In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts","og_url":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-07T13:01:25+00:00","article_modified_time":"2025-04-03T17:14:01+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg","type":"","width":"","height":""}],"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\/getting-started-saas\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Getting Started with Sass: Installation and the Basics","datePublished":"2012-11-07T13:01:25+00:00","dateModified":"2025-04-03T17:14:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/"},"wordCount":507,"commentCount":51,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg","keywords":["CSS","sass"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/","url":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/","name":"Getting Started with Sass: Installation and the Basics - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg","datePublished":"2012-11-07T13:01:25+00:00","dateModified":"2025-04-03T17:14:01+00:00","description":"In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If you have been following our previous posts","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-saas\/installing-sass-on-windows.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Sass: Installation and the Basics"}]},{"@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-40l","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15397","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=15397"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15397\/revisions"}],"predecessor-version":[{"id":73555,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15397\/revisions\/73555"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15397"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}