{"id":68312,"date":"2016-12-16T17:01:25","date_gmt":"2016-12-16T17:01:25","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=68312"},"modified":"2016-12-16T17:01:25","modified_gmt":"2016-12-16T17:01:25","slug":"client-side-usage-less","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/client-side-usage-less\/","title":{"rendered":"Client-Side Usage OF Less"},"content":{"rendered":"<p>To use Less for web developing we need to install node.js package manager on our server after that we have to compile the .less file to the css file through the command-line. But with the help of Client-Side we do not have to compile .less file to css file again and again. We can compile the less code to the actual css code withe help of less.js file. We just need to download the less.js from <a href=\"https:\/\/github.com\/less\/less.js\/archive\/master.zip\">https:\/\/github.com\/less\/less.js\/archive\/master.zip <\/a>or we use the CDN for less.js\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">script<\/span> <span class=\"hljs-attribute\">src<\/span>=<span class=\"hljs-value\">&#8220;\/\/cdnjs.cloudflare.com\/ajax\/libs\/less.js\/2.7.1\/less.min.js&#8221;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">script<\/span>&gt;. we just need to link the less file just above the less.js included position and after every refresh less.js compile the less code to the actual css code. <\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-68313\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_1.png\" alt=\"screenshot_1\" width=\"1114\" height=\"193\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_1.png 1114w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_1-250x43.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_1-300x52.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_1-768x133.png 768w\" sizes=\"(max-width: 1114px) 100vw, 1114px\" loading=\"lazy\" \/><\/p>\n<p>This Client-Side usages is only for the development not for the production as in every page refresh less.js calls a ajax request to compile the less code so it may slow your production site. So you can pre compile the less code with the online less compiler i.e http:\/\/less2css.org\/<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-68314\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_2-1.png\" alt=\"screenshot_2\" width=\"1298\" height=\"498\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_2-1.png 1298w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_2-1-250x96.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_2-1-300x115.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_2-1-768x295.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot_2-1-1200x460.png 1200w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" loading=\"lazy\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To use Less for web developing we need to install node.js package manager on our server after that we have to compile the .less file to the css file through the command-line. But with the help of Client-Side we do not have to compile .less file to css file again and again. We can compile <a href=\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":71,"featured_media":41008,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198,305],"tags":[],"class_list":["post-68312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-opencart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Client-Side Usage OF Less - 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\/client-side-usage-less\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Client-Side Usage OF Less - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"To use Less for web developing we need to install node.js package manager on our server after that we have to compile the .less file to the css file through the command-line. But with the help of Client-Side we do not have to compile .less file to css file again and again. We can compile [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\" \/>\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-16T17:01:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-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=\"Sambit Pattanayak\" \/>\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=\"Sambit Pattanayak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\"},\"author\":{\"name\":\"Sambit Pattanayak\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01\"},\"headline\":\"Client-Side Usage OF Less\",\"datePublished\":\"2016-12-16T17:01:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\"},\"wordCount\":201,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"articleSection\":[\"JavaScript\",\"opencart\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\",\"url\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\",\"name\":\"Client-Side Usage OF Less - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"datePublished\":\"2016-12-16T17:01:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/client-side-usage-less\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/client-side-usage-less\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Client-Side Usage OF Less\"}]},{\"@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\/23309d7bfba5b06d58b50ea5e3191f01\",\"name\":\"Sambit Pattanayak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sambit Pattanayak\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sambit-p819\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Client-Side Usage OF Less - 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\/client-side-usage-less\/","og_locale":"en_US","og_type":"article","og_title":"Client-Side Usage OF Less - Webkul Blog","og_description":"To use Less for web developing we need to install node.js package manager on our server after that we have to compile the .less file to the css file through the command-line. But with the help of Client-Side we do not have to compile .less file to css file again and again. We can compile [...]","og_url":"https:\/\/webkul.com\/blog\/client-side-usage-less\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-12-16T17:01:25+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","type":"image\/png"}],"author":"Sambit Pattanayak","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sambit Pattanayak","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/"},"author":{"name":"Sambit Pattanayak","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01"},"headline":"Client-Side Usage OF Less","datePublished":"2016-12-16T17:01:25+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/"},"wordCount":201,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","articleSection":["JavaScript","opencart"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/client-side-usage-less\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/","url":"https:\/\/webkul.com\/blog\/client-side-usage-less\/","name":"Client-Side Usage OF Less - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","datePublished":"2016-12-16T17:01:25+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/client-side-usage-less\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/client-side-usage-less\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Client-Side Usage OF Less"}]},{"@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\/23309d7bfba5b06d58b50ea5e3191f01","name":"Sambit Pattanayak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sambit Pattanayak"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/sambit-p819\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/68312","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\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=68312"}],"version-history":[{"count":1,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/68312\/revisions"}],"predecessor-version":[{"id":68315,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/68312\/revisions\/68315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/41008"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=68312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=68312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=68312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}