{"id":15230,"date":"2015-07-09T21:00:01","date_gmt":"2015-07-09T13:00:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15230"},"modified":"2023-07-09T01:26:12","modified_gmt":"2023-07-08T17:26:12","slug":"less-basic","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/less-basic\/","title":{"rendered":"LESS CSS &#8211; Beginner&#8217;s Guide"},"content":{"rendered":"<p>CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins, and Operations, allowing web developers to construct modular, scalable, and more manageable CSS styles.<\/p>\n<p>In this post, we are going to explore LESS, which is one of the most popular CSS Pre-processors available. It has been widely implemented in numerous front-end frameworks, including Bootstrap. We will also guide you through the basic utilities, tools, and setups to help you get started with LESS.<\/p>\n<h2>The Compiler<\/h2>\n<p>Let\u2019s start by setting up a compiler. The syntax of LESS is non-standard according to the W3C specification. This means that browsers cannot process and render the output, even though LESS shares similar traits with CSS.<\/p>\n<p>Here\u2019s a quick look at some LESS code:<\/p>\n<pre>\r\n@color-base: #2d5e8b;\r\n.class1 {\r\n\tbackground-color: @color-base;\r\n\t.class2 {\r\n\t\tbackground-color: #fff;\r\n\t\tcolor: @color-base;\r\n\t}\r\n}\r\n<\/pre>\n<p>The compiler will process the code and turn LESS syntax into browser-compliant CSS format:<\/p>\n<pre>\r\n.class1 {\r\n\tbackground-color: #2d5e8b;\r\n}\r\n.class1 .class2 {\r\n\tbackground-color: #fff;\r\n\tcolor: #2d5e8b;\r\n}\r\n<\/pre>\n<p>There are a number of tools for compiling CSS:<\/p>\n<h3>Using JavaScript<\/h3>\n<p>LESS comes with a <code>less.js<\/code> file which is really easy to deploy in your website. Create a stylesheet with <code>.less<\/code> extension and link it in your document using the <code>rel=\"stylesheet\/less\"<\/code> attribute.<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\/less\" type=\"text\/css\" href=\"main.less\" \/&gt;\r\n<\/pre>\n<p>You can obtain <a href=\"https:\/\/raw.github.com\/less\/less.js\/v2.5.1\/dist\/less.min.js\" target=\"_blank\" rel=\"noopener noreferrer\">the JS file here<\/a>, download it through Bower package manager, else directly link to CDN, like so:<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\/less\" type=\"text\/css\" href=\"main.less\" \/&gt;\r\n&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/less.js\/2.5.1\/less.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>You are all set and can compose styles within the <code>.less<\/code>. The LESS syntax will be compiled on the fly as the page loads. Keep in mind that <strong>using JavaScript is discouraged <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.fortrabbit.com\/multi-stage-deployment-for-website-development#example-four-level-deployment\">at the production stage<\/a> as it will badly affect the website performance<\/strong>.<\/p>\n<p>You should always compile the LESS syntax beforehand and only <strong>serve regular CSS<\/strong> instead. You can use <strong>Terminal<\/strong>, a Task Runner like <strong>Grunt<\/strong> or <strong>Gulp<\/strong>, or a graphical application to do so.<\/p>\n<h3>Using CLI<\/h3>\n<p>LESS provides a native command line interface (CLI), <code>lessc<\/code>, which handles several tasks beyond just compiling the LESS syntax. Using the CLI we can <a href=\"https:\/\/www.hongkiat.com\/blog\/identify-code-errors-sublime-linter\/\">lint the codes<\/a>, compress the files, and create a source map. The command is based on Node.js that effectively allows the command to work across Windows, OS X, and Linux.<\/p>\n<p>Make sure that Node.js has been installed (otherwise <a href=\"https:\/\/nodejs.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">grab the installer here<\/a>), then install <a href=\"https:\/\/www.npmjs.com\/package\/less\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">LESS CLI through NPM<\/a> (Node Package Manager) using the following command line.<\/p>\n<pre>\r\nnpm install -g less\r\n<\/pre>\n<p>Now you have the <code>lessc<\/code> command at your disposal to compile LESS into CSS:<\/p>\n<pre>\r\nlessc style.less style.css\r\n<\/pre>\n<h3>Using Task Runner<\/h3>\n<p>Task runner is a tool that automates development tasks and workflows. Instead of manually running the \u2018lessc\u2019 command each time we want to compile our code, we can install a task runner. This tool can be set to monitor changes within our LESS files and instantly compile LESS into CSS.<\/p>\n<p>Two popular tools in this category are <a href=\"https:\/\/gruntjs.com\/\">Grunt<\/a> and <a href=\"https:\/\/gulpjs.com\/\">Gulp<\/a>. We have a series of posts that cover these tools. Check out these posts to learn how to integrate these tools into your workflow.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/automate-workflow-with-grunt\/\">How to Automate Your Workflow using Grunt<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/\">Getting Started With Gulp.js<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/gulp-vs-grunt\/\">The Battle Of Build Scripts: Gulp Vs Grunt<\/a><\/li>\n<\/ul>\n<h3>Using a Graphical Application<\/h3>\n<p>For those who are not familiar with using the Terminal and command lines, a graphical interface is a viable alternative. Today, there are numerous applications available for compiling LESS across all platforms, some of which are free, while others require payment.<\/p>\n<p>Here is the complete list:<\/p>\n<table>\n<thead>\n<tr>\n<td>App<\/td>\n<td>Platform<\/td>\n<td>Cost<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/github.com\/teammixture\/mixture.io\" target=\"_blank\" rel=\"noopener noreferrer\">Mixture<\/a><\/td>\n<td>Mac \/ Windows<\/td>\n<td>Free<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/koala-app.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Koala<\/a><\/td>\n<td>Mac \/ Windows \/ Linux<\/td>\n<td>Free<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/prepros.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Prepros<\/a><\/td>\n<td>Mac \/ Windows<\/td>\n<td>Freemium ($29)<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/winless.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WinLESS<\/a><\/td>\n<td>Windows<\/td>\n<td>Free<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/codekitapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CodeKit<\/a><\/td>\n<td>Mac<\/td>\n<td>$32<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The choice of compiler (beyond JavaScript) doesn\u2019t significantly impact your work, as long as the tool functions effectively and enhances your workflow. Feel free to choose the one that suits you best.<\/p>\n<h2>The Code Editor<\/h2>\n<p>You have the flexibility to use any <a href=\"https:\/\/www.hongkiat.com\/blog\/free-code-editors-reviewed\/\">code editor<\/a> of your choice. All you need to do is install a plugin or an extension that highlights LESS syntax with appropriate colors. This feature is now widely available across almost all code editors and Integrated Development Environments (IDEs). Some of the popular ones that support this feature include <a href=\"https:\/\/github.com\/danro\/Less-sublime\">Sublime Text<\/a>, <a href=\"https:\/\/github.com\/azrafe7\/LESS-for-Notepad-plusplus\">Notepad++<\/a>, <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/dd5635b0-3c70-484f-abcb-cbdcabaa9923\">Visual Studio<\/a>, and <a href=\"https:\/\/github.com\/appden\/less.tmbundle\">TextMate<\/a>, among others.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.jpg\" height=\"380\" width=\"700\" alt><\/figure>\n<p>Now that we have the compiler and the code editor all set, we can start writing CSS styles with LESS syntax.<\/p>\n<h2>LESS Syntax<\/h2>\n<p>Unlike regular CSS as we know it, LESS works much more like a programming language. It\u2019s dynamic, so expect to find some terminologies like <strong>Variables<\/strong>, <strong>Operation<\/strong> and <strong>Scope<\/strong> along the way.<\/p>\n<h3>Variables<\/h3>\n<p>First of all, let\u2019s take a look at the <strong>Variables<\/strong>.<\/p>\n<p>If you\u2019ve been working quite awhile with CSS, you probably have written something like this, where we have repetitive values assigned in declaration blocks in the entire stylesheet.<\/p>\n<pre>\r\n.class1 {\r\n\tbackground-color: #2d5e8b;\r\n}\r\n.class2 {\r\n\tbackground-color: #fff;\r\n\tcolor: #2d5e8b;\r\n}\r\n.class3 {\r\n\tborder: 1px solid #2d5e8b;\r\n}\r\n<\/pre>\n<p>This practice is actually fine \u2013 until we find ourselves having to sift through more than <strong>a thousand or more similar snippets <\/strong> throughout the stylesheet. This could happen when building a large-scale website. Work will become tedious.<\/p>\n<p>If we are using a CSS pre-procesor like LESS, the instance above would not be a problem \u2013 we can use <strong>Variables<\/strong>. The variables will allow us to store <strong>a constant<\/strong> value that later can be reused in the entire stylesheet.<\/p>\n<pre>\r\n@color-base: #2d5e8b;\r\n\r\n.class1 {\r\n\tbackground-color: @color-base;\r\n}\r\n.class2 {\r\n\tbackground-color: #fff;\r\n\tcolor: @color-base;\r\n}\r\n.class3 {\r\n\tborder: 1px solid @color-base;\r\n}\r\n<\/pre>\n<p>In the example above, we store the color <code>#2d5e8b<\/code> in the <code>@color-base<\/code> variable. When you want to change the color, we only need to change the value in this variable.<\/p>\n<p>Aside from color, you can also put other values in the variables like for example:<\/p>\n<pre>\r\n@font-family: Georgia\r\n@dot-border: dotted\r\n@transition: linear\r\n@opacity: 0.5\r\n<\/pre>\n<h3>Mixins<\/h3>\n<p>In LESS, we can use <strong>Mixins<\/strong> to reuse whole declarations in a CSS rule set in another rule set. Here is an example:<\/p>\n<pre>\r\n.gradients {\r\n\tbackground: #eaeaea; \r\n\tbackground: linear-gradient(top, #eaeaea, #cccccc);\r\n\tbackground: -o-linear-gradient(top, #eaeaea, #cccccc); \r\n\tbackground: -ms-linear-gradient(top, #eaeaea, #cccccc); \r\n\tbackground: -moz-linear-gradient(top, #eaeaea, #cccccc); \r\n\tbackground: -webkit-linear-gradient(top, #eaeaea, #cccccc); \r\n}\r\n<\/pre>\n<p>In the above snippet, we have preset a default <strong>gradient<\/strong> color inside the <code>.gradients<\/code> class. Whenever we want to add the gradients we simply insert the <code>.gradients<\/code> this way:<\/p>\n<pre>\r\ndiv {\r\n\t.gradients;\r\n\tborder: 1px solid #555;\r\n\tborder-radius: 3px;\r\n}\r\n<\/pre>\n<p>The <code>.box<\/code> will inherit all the declaration block inside the <code>.gradients<\/code>. So, the CSS rule above is equal to the following plain CSS:<\/p>\n<pre>\r\ndiv {\r\n\tbackground: #eaeaea; \r\n\tbackground: linear-gradient(top, #eaeaea, #cccccc);\r\n\tbackground: -o-linear-gradient(top, #eaeaea, #cccccc); \r\n\tbackground: -ms-linear-gradient(top, #eaeaea, #cccccc); \r\n\tbackground: -moz-linear-gradient(top, #eaeaea, #cccccc); \r\n\tbackground: -webkit-linear-gradient(top, #eaeaea, #cccccc); \r\n\tborder: 1px solid #555;\r\n\tborder-radius: 3px;\r\n}\r\n<\/pre>\n<p>Furthermore, if you are using CSS3 a lot in your website, you can use LESS Elements to make your job much easier. LESS Elements is a collection of common <strong>CSS3 Mixins<\/strong> that we may use often in  stylesheets, such as <code>border-radius<\/code>, <code>gradients<\/code>, <code>drop-shadow<\/code> and so on.<\/p>\n<p>To use LESS Elements, simply add the <code>@import<\/code> rule in your <a target=\"_blank\" href=\"https:\/\/lesscss.org\/\" rel=\"noopener noreferrer\">LESS stylesheet<\/a>, but don\u2019t forget to download it first and add it into your working directory.<\/p>\n<pre>\r\n@import \"elements.less\";\r\n<\/pre>\n<p>We can now reuse all the <strong>classes<\/strong> provided from the <code>elements.less<\/code>, for example, to add <code>3px<\/code> border radius to a <code>div<\/code>, we can write:<\/p>\n<pre>\r\ndiv {\r\n\t.rounded(3px);\r\n}\r\n<\/pre>\n<p>For further usage, please refer to the <a target=\"_blank\" href=\"https:\/\/lesscss.org\/\" rel=\"noopener noreferrer\">official documentation<\/a>.<\/p>\n<h3>Nested Rules<\/h3>\n<p>When you write styles in plain CSS, you may also have come through these typical code structures.<\/p>\n<pre>\r\nnav {\r\n\theight: 40px;\r\n\twidth: 100%;\r\n\tbackground: #455868;\r\n\tborder-bottom: 2px solid #283744;\r\n}\r\nnav li {\r\n\twidth: 600px;\r\n\theight: 40px;\r\n}\r\nnav li a {\r\n\tcolor: #fff;\r\n\tline-height: 40px;\r\n\ttext-shadow: 1px 1px 0px #283744;\r\n}\r\n<\/pre>\n<p>In plain CSS, we select child elements by first targeting the parent in every rule set, which is considerably redundant if we follow the <a target=\"_blank\" href=\"http:\/\/en.wikipedia.org\/wiki\/Don't_repeat_yourself\" rel=\"noopener noreferrer\">\u201cbest practices\u201d principle<\/a>.<\/p>\n<p>In LESS CSS, we can simplify the rule sets by <strong>nesting the child elements inside the parents<\/strong>, as follows;<\/p>\n<pre>\r\nnav {\r\n\theight: 40px;\r\n\twidth: 100%;\r\n\tbackground: #455868;\r\n\tborder-bottom: 2px solid #283744;\r\n\tli {\r\n\t\twidth: 600px;\r\n\t\theight: 40px;\r\n\t\ta {\r\n\t\t\tcolor: #fff;\r\n\t\t\tline-height: 40px;\r\n\t\t\ttext-shadow: 1px 1px 0px #283744;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>You can also assign <em>pseudo-classes<\/em>, like <code>:hover<\/code>, to the selector using  the ampersand (&) symbol.<\/p>\n<p>Let\u2019s say we want to add <code>:hover<\/code> to the anchor tag above, we can write it this way:<\/p>\n<pre>\r\na {\r\n\tcolor: #fff;\r\n\tline-height: 40px;\r\n\ttext-shadow: 1px 1px 0px #283744;\r\n\t&:hover {\r\n\t\tbackground-color: #000;\r\n\t\tcolor: #fff;\r\n\t}\r\n}\r\n<\/pre>\n<h3>Operation<\/h3>\n<p>We can also perform operations in LESS, such as <strong>addition, subtraction, multiplication and division<\/strong> to numbers, colors and variables in the stylesheet.<\/p>\n<p>Let\u2019s say we want element B to be two times  higher than element A. In that case, we can write it this way:<\/p>\n<pre>\r\n@height: 100px\r\n\r\n.element-A {\r\n\theight: @height;\t\r\n}\r\n.element-B {\r\n\theight: @height * 2;\r\n}\r\n<\/pre>\n<p>As you can see above, we first store the value in the <code>@height<\/code> variable, then assign the value to element A.<\/p>\n<p>In element B, rather than calculate the height ourselves, <strong>we can multiply the height by 2<\/strong> using the asterisk operator (*). Now, whenever we change the value in the <code>@height<\/code> variable, <strong>element B<\/strong> will always have twice the height.<\/p>\n<p>Check out more advanced operation examples in our previous tutorial: <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/\" rel=\"noopener noreferrer\">Designing A Slick Menu Navigation Bar<\/a>.<\/p>\n<h3>Scope<\/h3>\n<p>LESS applies the <strong>Scope<\/strong> concept, where variables will be inherited first from the local scope, and when it is not available locally, it will search through a wider scope.<\/p>\n<pre>\r\nheader {\r\n\t@color: black;\r\n\tbackground-color: @color;\r\n\tnav {\r\n  \t\t@color: blue;\r\n\t\t\tbackground-color: @color;\r\n  \t\ta {\r\n\t\t\t\tcolor: @color;\r\n  \t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>In the example above, the <code>header<\/code> has a <strong>black<\/strong> background color, but <code>nav<\/code>\u2018s background color will be <strong>blue<\/strong> as it has the @color variable in its local scope, while the <code>a<\/code> will also have blue that is inherited from its nearer parent, <code>nav<\/code>.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>Ultimately, we hope this post has provided you with a fundamental understanding of how to improve your CSS writing using LESS. It may feel a bit unfamiliar at first, but with more practice, it will undoubtedly become much easier.<\/p>\n<p>Here are a couple of tutorials that I encourage you to look into for further tips and practices, which can help push your LESS skill up to the next level.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/\">LESS CSS Tutorial: Designing A Slick Menu Navigation Bar<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/\">Understanding LESS Color Functions<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/less-css-new-features\/\">3 New LESS CSS Features You Should Know<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins, and Operations, allowing web developers to construct modular, scalable, and more manageable CSS styles. In this post, we are going to explore LESS, which is one of the most popular CSS Pre-processors&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,1980],"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>LESS CSS - Beginner&#039;s Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins,\" \/>\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\/less-basic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LESS CSS - Beginner&#039;s Guide\" \/>\n<meta property=\"og:description\" content=\"CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/less-basic\/\" \/>\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=\"2015-07-09T13:00:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-08T17:26:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"LESS CSS &#8211; Beginner&#8217;s Guide\",\"datePublished\":\"2015-07-09T13:00:01+00:00\",\"dateModified\":\"2023-07-08T17:26:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/\"},\"wordCount\":1429,\"commentCount\":47,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-basic\\\/less-syntax-colors.jpg\",\"keywords\":[\"CSS\",\"Less\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/\",\"name\":\"LESS CSS - Beginner's Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-basic\\\/less-syntax-colors.jpg\",\"datePublished\":\"2015-07-09T13:00:01+00:00\",\"dateModified\":\"2023-07-08T17:26:12+00:00\",\"description\":\"CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-basic\\\/less-syntax-colors.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-basic\\\/less-syntax-colors.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-basic\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"LESS CSS &#8211; Beginner&#8217;s Guide\"}]},{\"@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":"LESS CSS - Beginner's Guide - Hongkiat","description":"CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins,","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\/less-basic\/","og_locale":"en_US","og_type":"article","og_title":"LESS CSS - Beginner's Guide","og_description":"CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins,","og_url":"https:\/\/www.hongkiat.com\/blog\/less-basic\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-07-09T13:00:01+00:00","article_modified_time":"2023-07-08T17:26:12+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"LESS CSS &#8211; Beginner&#8217;s Guide","datePublished":"2015-07-09T13:00:01+00:00","dateModified":"2023-07-08T17:26:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/"},"wordCount":1429,"commentCount":47,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.jpg","keywords":["CSS","Less"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/less-basic\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/","url":"https:\/\/www.hongkiat.com\/blog\/less-basic\/","name":"LESS CSS - Beginner's Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.jpg","datePublished":"2015-07-09T13:00:01+00:00","dateModified":"2023-07-08T17:26:12+00:00","description":"CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such as Variables, Functions or Mixins,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/less-basic\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-basic\/less-syntax-colors.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/less-basic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"LESS CSS &#8211; Beginner&#8217;s Guide"}]},{"@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-3XE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15230","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=15230"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15230\/revisions"}],"predecessor-version":[{"id":68075,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15230\/revisions\/68075"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15230"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}