{"id":68974,"date":"2016-12-22T13:27:08","date_gmt":"2016-12-22T13:27:08","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=68974"},"modified":"2024-04-05T09:56:04","modified_gmt":"2024-04-05T09:56:04","slug":"how-to-use-less-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/","title":{"rendered":"How to Use LESS in Magento 2"},"content":{"rendered":"\n

Use of LESS in magento 2<\/p>\n\n\n\n

Today I am going to explain the use of LESS in magento 2 in this article. I assume you know what is LESS, if not then please go through the blog – What Is Less ?<\/a> first before reading this article.<\/p>\n\n\n\n

Also, You can read our blog to know about the advantages of using LESS<\/a>.<\/p>\n\n\n\n

Now, the question is – How LESS files are compiled in magento 2 ?<\/strong> Or How LESS pre-processor generates CSS in magento 2 ?<\/strong> So today I am going to discuss these mechanisms for magento 2. I assume you know now how the LESS files are created.<\/p>\n\n\n\n

So lets take an example of magento blank theme. In blank theme following css files are included in head:<\/p>\n\n\n\n

<head>\n    <css src="css\/styles-m.css" \/>\n    <css src="css\/styles-l.css" media="screen and (min-width: 768px)"\/>\n    <css src="css\/print.css" media="print" \/>\n<\/head><\/pre>\n\n\n\n
These Css source files should be located under :<\/p>\n\n\n\n
<Magento_Blank_theme_dir>\/web\/css\/styles-m.css<\/em>
<Magento_Blank_theme_dir>\/web\/css\/styles-l.css<\/em>
<Magento_Blank_theme_dir>\/web\/css\/print.css<\/em><\/p>\n\n\n\n
But if you will navigate into above paths, you will not find any CSS files with these names.
So, the next question is – then from where these CSS files loads on the browser ?<\/strong> I will explain this.<\/p>\n\n\n\n
When you navigate to above paths you would not find CSS files there, but you must find the files with same names with .less<\/em> extension instead of .css<\/em>, right?<\/strong><\/p>\n\n\n\n
Like I say you found the following files :<\/p>\n\n\n\n
<Magento_Blank_theme_dir>\/web\/css\/styles-m.less<\/em>
<Magento_Blank_theme_dir>\/web\/css\/styles-l.less<\/em>
<Magento_Blank_theme_dir>\/web\/css\/print.less<\/em><\/p>\n\n\n\n
From here the magic starts. When magento did not find the CSS files you mentioned in your handles, then it will look for the same files with .less<\/em> extension.
Moving towards the next question must raising in your mind is HOW?<\/strong>
So in magento there are two modes to compile .less<\/em> files to .css : <\/em>
First<\/strong> is – Server-side LESS compilation<\/span><\/em>
and Second<\/strong> is – Client-side LESS compilation<\/span><\/em><\/p>\n\n\n\n
Now I am going to explain both modes one by one.<\/p>\n\n\n\n
\n
\nServer-side LESS Compilation\n<\/h3>\n<\/div><\/div>\n\n\n\n
This is the default compilation mode set in magento settings under (Stores > Configuration > Advanced > Developer<\/strong>) Frontend Development workflow<\/strong><\/em>. This mode can be used in both : developer and production mode but with some limitation. <\/p>\n\n\n\n
In Server-side LESS compilation mode, the compilation is performed over server using\u00a0LESS PHP library<\/a>\u00a0. Now following are the steps to describe how LESS pre-processor works in Server-side LESS compilation mode.<\/p>\n\n\n\n
Step 1<\/span><\/em> : LESS pre-processor checks if the defined CSS file is found in the relative directory or not. If CSS file is found then it stops its execution otherwise proceed to the next step.<\/p>\n\n\n\n
Step 2<\/span><\/em> : If CSS file is not found, then LESS pre-processor finds the file of same name with .less<\/em> extension. If LESS files are not found then stops its execution otherwise proceed to next step.<\/p>\n\n\n\n
Step 3<\/span><\/em> : Reads .less<\/em> file contents and resolve all @import<\/em> directives (if any)<\/p>\n\n\n\n
Step 4<\/span><\/em> : Resolves all paths of LESS files using Magento fallback mechanism and put LESS files under \/var\/view_preprocessed\/<\/strong><\/em>*<\/strong><\/p>\n\n\n\n
Step 5<\/span><\/em> : All source .less<\/em> files are parsed to PHP LESS compiler and then it generates relative CSS files to pub\/static\/frontend\/<Vendor>\/<theme>\/<locale>\/<\/strong><\/em><\/p>\n\n\n\n
So this is the whole process to generate CSS file from LESS<\/em> using PHP LESS compiler. Now the next question raised here is – how LESS preprocessor works in Server-side compilation mode with developer and production mode whenever you made any change in LESS file ?<\/strong>\u00a0So I am also going to explain this in details.<\/p>\n\n\n\n
In both (developer or production) mode, You need to clean following directories every time you make changes to less files :
-pub\/static\/frontend\/<Vendor>\/<theme>\/<locale>\/<\/em><\/strong>
–<\/em><\/strong>\/var\/view_preprocessed\/<\/strong><\/em>*<\/strong><\/p>\n\n\n\n
And then In Developer Mode<\/span><\/em> :
by loading the page only, the PHP LESS compiler will process .less<\/em> files into .css<\/em> files.<\/p>\n\n\n\n
But In Production Mode<\/span><\/em> :
You need to deploy the CSS by using following command in your terminal :<\/p>\n\n\n\n
php bin\/magento setup:static-content:deploy<\/pre>\n\n\n\n
and then you can see the changes at frontend.<\/p>\n\n\n\n
Now we are proceeding to next compilation mode, i.e. Client-side LESS compilation mode.<\/p>\n\n\n\n
\n
\nClient-side LESS compilation mode\n<\/h3>\n<\/div><\/div>\n\n\n\n
To set this mode you need to navigate in magento admin under (Stores > Configuration > Advanced > Developer<\/strong>) Frontend Development workflow<\/em><\/strong> and then set Client-side LESS compilation<\/em> mode and then click on button Save Config<\/strong>.<\/p>\n\n\n\n
Client-side LESS compilation mode works same in both (developer and production) mode. In Client-side LESS compilation mode, the compilation is performed over client (browser) using lib\/web\/less\/config.less.js<\/span><\/em><\/strong> and lib\/web\/less\/less.min.js<\/span><\/em><\/strong> files. <\/p>\n\n\n\n
This is similar as server-side LESS compilation, but the difference is, it publish pub\/static<\/strong><\/em> on the last step (after reloading the page).<\/p>\n\n\n\n
In client-side LESS compilation .less<\/em> files are published to pub\/static\/frontend\/<Vendor>\/<theme>\/<locale><\/em><\/strong> directory. Also resolves @import<\/strong> directives with root source (.less<\/em>) files. Whenever you make any changes to LESS files and reloads the browser, the changes are reflected immediately after reloading the page. <\/p>\n\n\n\n
The CSS created dynamically when you load the page. You do not need to clear pub\/static\/frontend\/<Vendor>\/<theme>\/<locale><\/strong><\/em> every time you make any change in LESS file, But if you do any changes in root source files that contain the @import<\/em><\/strong> directive where the imported file is specified without extension.<\/p>\n\n\n\n
OR if you rename, remove, or add a .less<\/em> file imported with a @import<\/em><\/strong> directive but you did not correct the directives accordingly, so you will need to clear the pub\/static\/frontend\/<Vendor>\/<theme>\/<locale><\/strong><\/em> directory.<\/p>\n\n\n\n
That\u2019s all for today in this article, hope it will help you to use LESS in magento 2. Try this and if you have any queries then just comment below \ud83d\ude42<\/p>\n\n\n\n
Hope this blog will help you in Magento 2 development<\/a>, you can also check our Magento 2 theme development<\/a> service to create quality and custom themes along with Magento 2 modules<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Use of LESS in magento 2 Today I am going to explain the use of LESS in magento 2 in this article. I assume you know what is LESS, if not then please go through the blog – What Is Less ? first before reading this article. Also, You can read our blog to know […]<\/a><\/p>\n","protected":false},"author":103,"featured_media":66844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,1],"tags":[4231,4192],"class_list":["post-68974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","category-uncategorized","tag-use-of-less-in-magento-2","tag-what-is-less"],"yoast_head":"\nHow to Use LESS in Magento 2 - Webkul Blog<\/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:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use LESS in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Use of LESS in magento 2 Today I am going to explain the use of LESS in magento 2 in this article. I assume you know what is LESS, if not then please go through the blog – What Is Less ? first before reading this article. Also, You can read our blog to know [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-22T13:27:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-05T09:56:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pranjali Goel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pranjali Goel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\"},\"author\":{\"name\":\"Pranjali Goel\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/c1964884ceb33a5ffdf322ee5424f692\"},\"headline\":\"How to Use LESS in Magento 2\",\"datePublished\":\"2016-12-22T13:27:08+00:00\",\"dateModified\":\"2024-04-05T09:56:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\"},\"wordCount\":996,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"keywords\":[\"Use of LESS in magento 2\",\"What is Less ?\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\",\"name\":\"How to Use LESS in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"datePublished\":\"2016-12-22T13:27:08+00:00\",\"dateModified\":\"2024-04-05T09:56:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use LESS in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/c1964884ceb33a5ffdf322ee5424f692\",\"name\":\"Pranjali Goel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e670273251719f83735534af186231dd99fbe378466fef356d4e55de5b46244f?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e670273251719f83735534af186231dd99fbe378466fef356d4e55de5b46244f?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Pranjali Goel\"},\"description\":\"Believes in simple lifestyle and follow a simple logic to make herself better than yesterday.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/pranjali968\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use LESS in Magento 2 - Webkul Blog","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:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to Use LESS in Magento 2 - Webkul Blog","og_description":"Use of LESS in magento 2 Today I am going to explain the use of LESS in magento 2 in this article. I assume you know what is LESS, if not then please go through the blog – What Is Less ? first before reading this article. Also, You can read our blog to know [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-12-22T13:27:08+00:00","article_modified_time":"2024-04-05T09:56:04+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","type":"image\/png"}],"author":"Pranjali Goel","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Pranjali Goel","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/"},"author":{"name":"Pranjali Goel","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/c1964884ceb33a5ffdf322ee5424f692"},"headline":"How to Use LESS in Magento 2","datePublished":"2016-12-22T13:27:08+00:00","dateModified":"2024-04-05T09:56:04+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/"},"wordCount":996,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","keywords":["Use of LESS in magento 2","What is Less ?"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/","name":"How to Use LESS in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","datePublished":"2016-12-22T13:27:08+00:00","dateModified":"2024-04-05T09:56:04+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-use-less-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use LESS in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/c1964884ceb33a5ffdf322ee5424f692","name":"Pranjali Goel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e670273251719f83735534af186231dd99fbe378466fef356d4e55de5b46244f?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e670273251719f83735534af186231dd99fbe378466fef356d4e55de5b46244f?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Pranjali Goel"},"description":"Believes in simple lifestyle and follow a simple logic to make herself better than yesterday.","url":"https:\/\/webkul.com\/blog\/author\/pranjali968\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/68974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=68974"}],"version-history":[{"count":18,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/68974\/revisions"}],"predecessor-version":[{"id":432046,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/68974\/revisions\/432046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/66844"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=68974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=68974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=68974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}