{"id":15419,"date":"2019-12-09T23:16:52","date_gmt":"2019-12-09T15:16:52","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15419"},"modified":"2019-12-13T19:18:24","modified_gmt":"2019-12-13T11:18:24","slug":"sass-vs-less","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/","title":{"rendered":"CSS Preprocessors Compared: Sass vs. LESS"},"content":{"rendered":"

There are popuplar CSS Pre-processors LESS<\/a> and Sass<\/a>. CSS Preprocessor<\/strong> primarily intends to make authoring CSS more dynamic, organized and productive by bringing several programming features into the it such as variables, mixins, and conditionals. The question now is which of these two do the job better?<\/strong><\/p>\n

To decide, we will compare the two in several factors: the one that performs better gets one point; in the event of a tie, both will be awarded one point.<\/p>\n

Let\u2019s begin.<\/p>\n

Read also:<\/strong> Getting Started with Syntactically Awesome Stylesheets<\/a><\/p>\n

Installation<\/h2>\n

Let\u2019s start with the very fundamental step, Installation<\/strong>. Sass and LESS are built upon different platform.<\/p>\n

Sass:<\/strong> Sass requires a compiler written in C++<\/a> and requires the implementor for this compiler of the designated language. If your project runs on Node.js application, you\u2019d need to install Node compiler<\/a>. There\u2019s one for Go<\/a>, Python<\/a>, Ruby<\/a> and even C#<\/a>.<\/p>\n

This compiler size is pretty big so it may take a while to download with slow Internet connection. Furthermore, each of the platform version may as well require different version of the compiler so you will need to download the compatible compiler.<\/p>\n

LESS:<\/strong> LESS, on the other hand, is purely written in JavaScript. Intalling LESS is as easy as linking JavaScript library to your HTML document. There are a few GUI applications to help in compiling LESS to CSS and most of them are free and performing very well (e.g. WinLess<\/a> and LESS.app<\/a>).<\/p>\n

Conclusion<\/strong>: LESS is easy and quick to install. It does not rquires hugh compiler to get it running<\/p>\n

Score so far:<\/strong> Sass (0) \u2013 LESS (1)<\/p>\n

Languages<\/h2>\n

Every CSS Preprocessor has their own language and they are mostly common. For example, both Sass and LESS has Variables, but there is no significant difference in it, except Sass defines variables with a $<\/strong> sign while LESS does it with an @<\/strong> sign. They still do the same thing: store a constant value<\/strong>.<\/p>\n

Below, we will examine some of the most commonly used languages both in Sass and LESS (based on my experience).<\/p>\n

Nesting<\/h3>\n

Nesting rule is good practice to avoid writing selectors repeatedly and both Sass and LESS have the same fashion in nesting rules;<\/p>\n

Sass\/SCSS and LESS<\/strong><\/p>\n

\r\nnav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\tul {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t}\r\n}\r\n<\/pre>\n
But Sass\/SCSS takes this method a step further by allowing us to also nest individual properties, here is an example:<\/p>\n
\r\nnav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\tul {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t}\r\n\tborder: {\r\n\t\tstyle: solid;\r\n\t\tleft: {\r\n\t\twidth: 4px;\r\n\t\tcolor: #333333;\r\n\t\t}\r\n\t\tright: {\r\n\t\twidth: 2px;\r\n\t\tcolor: #000000;\r\n\t\t}\r\n \t}\r\n}\r\n<\/pre>\n
This code will generate the following output.<\/p>\n
\r\nnav {\r\n  margin: 50px auto 0;\r\n  width: 788px;\r\n  height: 45px;\r\n  border-style: solid;\r\n  border-left-width: 4px;\r\n  border-left-color: #333333;\r\n  border-right-width: 2px;\r\n  border-right-color: #000000;\r\n}\r\nnav ul {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n<\/pre>\n
Conclusion<\/strong>: Nesting individual properties is a nice addition and is considered best practice<\/strong>, especially following with DRY (Don\u2019t Repeat Yourself) principle<\/a>. So I think it is clear which one is doing better in this case.<\/p>\n
Score so far:<\/strong> Sass (1) \u2013 LESS (1)<\/p>\n
Mixins<\/h3>\n
Mixins in Sass and LESS are defined a bit differently. In Sass we use the@mixin<\/code> directive while in LESS we define it with class selector. Here is an example:<\/p>\n
Sass\/Scss<\/strong><\/p>\n
\r\n@mixin border-radius ($values) {\r\n\tborder-radius: $values;\r\n}\r\n\r\nnav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t@include border-radius(10px);\r\n}\r\n<\/pre>\n
LESS<\/strong><\/p>\n
\r\n.border( @radius ) {\r\n\tborder-radius: @radius;\r\n}\r\nnav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border(10px);\r\n}\r\n<\/pre>\n
Mixins will copy and add in<\/strong> the properties to where it\u2019s defined.<\/p>\n
Inheritance<\/p>\n
Both Sass and LESS takes further with so called Inheritance<\/strong>. The concept is pretty identical to Mixins, but instead of copying the whole CSS properties, it will group selectors that have the exact same set properties and values using the. Sass uses @extends<\/code> while LESS takes it with the :extend<\/code> pseudo-class.<\/p>\n
Take a look at this example below:<\/p>\n
Sass\/SCSS<\/strong><\/p>\n
\r\n.circle {\r\n\tborder: 1px solid #ccc;\r\n\tborder-radius: 50px;\r\n\toverflow: hidden;\r\n}\r\n.avatar {\r\n\t@extend .circle;\r\n}\r\n<\/pre>\n
LESS<\/strong>:<\/p>\n
\r\n.circle {\r\n\tborder: 1px solid #ccc;\r\n\tborder-radius: 50px;\r\n\toverflow: hidden;\r\n}\r\n\r\n.avatar:extend(.circle) {}\r\n<\/pre>\n
This code will result as;<\/p>\n
\r\n.circle, .avatar {\r\n  border: 1px solid #ccc;\r\n  border-radius: 50px;\r\n  overflow: hidden;\r\n}\r\n<\/pre>\n
Recommended Reading<\/strong>: Selector Inheritance the Easy Way: Introducing @extend<\/a><\/p>\n
Conclusion<\/strong>: Both Sass and LESS works pretty well except that LESS :extend<\/code> pseudo-class looks weird especially if we do not add additional preperties within the selector, or if we use it together with the CSS standard pseudo-class like :not<\/code> and :nth-child<\/code>. So I think Sass implements this feature better.<\/p>\n
Score so far:<\/strong> Sass (2) \u2013 LESS (1)<\/p>\n
Operations<\/h3>\n
Both Sass and LESS can do basic math operations, but may return different results. See how they perform this random calculation:<\/p>\n
Sass\/SCSS<\/strong><\/p>\n
\r\n$margin: 10px;\r\ndiv {\r\n\tmargin: $margin - 10%; \/* Syntax error: Incompatible units: '%' and 'px' *\/\r\n}\r\n<\/pre>\n
LESS<\/strong><\/p>\n
\r\n@margin: 10px;\r\ndiv {\r\n\tmargin: @margin - 10%; \/* = 0px *\/\r\n}\r\n<\/pre>\n
Conclusion<\/strong>: Sass, in this case, is doing it more accurately; as the % and px is not equivalent, it should return an error. Although, I actually hope that it can be something like 10px \u2013 10% = 9px<\/strong>.<\/p>\n
Score so far:<\/strong> Sass (3) \u2013 LESS (1)<\/p>\n
Error Handling<\/h3>\n
Error notification is also an important factor to makes debugging the code easier. Imagine thousands of lines of code and a tiny bit of error somewhere in the chaos. A clear error notification<\/strong> will be the best way to figure out the problem quickly.<\/p>\n
Sass<\/strong>: In this example, I\u2019ll be running compiling Sass through the CLI. Sass will generate an error notification whenever it sees the code in valid. In this case, we\u2019ll remove add a variable that\u2019s not defined, and this definitely should throw an error. Take a look at the screenshot below.<\/p>\n
\"sass<\/figure>\n
The error message is pretty straightforward. It says that there\u2019s an undefined variable (which is true) and highlight the offedning variable. We can also see which line caused this error. It has all we the basic need for debugging an error. But on top of this built-in error, Sass also introduced additional directive for handling the error better namely @error<\/code>, @warn<\/code> and @debug<\/code>.<\/p>\n
The Sass @error<\/code> and @warn<\/code> directive allows you to throw an custom error message. This additional feature is great whe you\u2019re creating a design system or a framework based on Sass, for example. You\u2019d want it to throw an message if they are using a deprecated mixins or when passing on an correct value, for example:<\/p>\n
\r\n@mixin border-radius( $rad ) {\r\n\t@warn \"The `border-radius()` mixin will be deprecated in version 5.2, use `corner-radius()` mixin instead\";\r\n\tborder-radius: $rad;\r\n}\r\n<\/pre>\n
The @debug<\/code> directive works similar to the console.log()<\/code> in JavaScript or var_dump()<\/code> in PHP. Here is an example.<\/p>\n
\r\n$space: 10px;\r\ndiv {\r\n\t@debug $space;\r\n\tmargin: ($spaces * 2);\r\n}\r\n<\/pre>\n
The above will output:<\/p>\n
\"sass<\/figure>\n
LESS<\/strong>: With the same scenario, LESS error message is I think more well-presented. First it shows the whole code block of the error instead of just the offending line, and highlight the error. LESS, at the moment, does not provide special directive to handle custom errors like Sass though.<\/p>\n
\"less<\/figure>\n
Conclusion:<\/strong> Both Sass and LESS handle the errors fine, but Sass takes further with additional directives to handle custom error messages so it\u2019s a win for Sass.<\/p>\n
Score<\/strong>: Sass (4) \u2013 LESS (1)<\/p>\n
Documentation<\/h2>\n
Documentation is very crucial part for every product; even seasoned developers would find it difficult to do things without Documentation<\/strong>.<\/p>\n
Sass<\/strong>: The Sass documentation is neat. Each section is divided into sub-section. The code examples is also presented in tab with three sections for Sass, SCSS, and the the compiled version to CSS which is helpful to get the full picture on how the Sass\/SCSS code will be compiled.<\/p>\n
\"sass<\/figure>\n
LESS<\/strong>: LESS documentation is concise. It\u2019s grouped into section and sub-sections, and also provides code examples with the compiled output albeit it is not arranged into a tab.<\/p>\n
\"sass<\/figure>\n
Conclusion<\/strong>: Both Sass and LESS documentation are well presented so I think we can call this one a tie.<\/p>\n
Score so far:<\/strong> Sass (5) \u2013 LESS (2).<\/p>\n
Final Thought<\/h2>\n
I think it\u2019s a clear conclusion that Sass is better<\/strong> with a total score of 5 versus 2<\/strong> for LESS. In the end though it is still up to the end-user\u2019s decision to pick the CSS Pre-processor of their choice. Be it Sass or LESS, as long as they are comfortable and be more productive, then that is the winner in their list.<\/p>\n
Lastly, if you have something in mind about this subject, feel free to share it in the comment box below.<\/p>","protected":false},"excerpt":{"rendered":"
There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by bringing several programming features into the it such as variables, mixins, and conditionals. The question now is which of these two do the job better? To decide, we will compare the two in…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCSS Preprocessors Compared: Sass vs. LESS - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by\" \/>\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\/sass-vs-less\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Preprocessors Compared: Sass vs. LESS\" \/>\n<meta property=\"og:description\" content=\"There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\" \/>\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=\"2019-12-09T15:16:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-13T11:18:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sass-vs-less\/sass-error.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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"CSS Preprocessors Compared: Sass vs. LESS\",\"datePublished\":\"2019-12-09T15:16:52+00:00\",\"dateModified\":\"2019-12-13T11:18:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/\"},\"wordCount\":1193,\"commentCount\":34,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-vs-less\\\/sass-error.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/\",\"name\":\"CSS Preprocessors Compared: Sass vs. LESS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-vs-less\\\/sass-error.jpg\",\"datePublished\":\"2019-12-09T15:16:52+00:00\",\"dateModified\":\"2019-12-13T11:18:24+00:00\",\"description\":\"There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-vs-less\\\/sass-error.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-vs-less\\\/sass-error.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-vs-less\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Preprocessors Compared: Sass vs. LESS\"}]},{\"@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":"CSS Preprocessors Compared: Sass vs. LESS - Hongkiat","description":"There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by","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\/sass-vs-less\/","og_locale":"en_US","og_type":"article","og_title":"CSS Preprocessors Compared: Sass vs. LESS","og_description":"There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by","og_url":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-12-09T15:16:52+00:00","article_modified_time":"2019-12-13T11:18:24+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sass-vs-less\/sass-error.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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"CSS Preprocessors Compared: Sass vs. LESS","datePublished":"2019-12-09T15:16:52+00:00","dateModified":"2019-12-13T11:18:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/"},"wordCount":1193,"commentCount":34,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sass-vs-less\/sass-error.jpg","keywords":["CSS"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/","url":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/","name":"CSS Preprocessors Compared: Sass vs. LESS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sass-vs-less\/sass-error.jpg","datePublished":"2019-12-09T15:16:52+00:00","dateModified":"2019-12-13T11:18:24+00:00","description":"There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sass-vs-less\/sass-error.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sass-vs-less\/sass-error.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Preprocessors Compared: Sass vs. LESS"}]},{"@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-40H","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15419","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=15419"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15419\/revisions"}],"predecessor-version":[{"id":49111,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15419\/revisions\/49111"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15419"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}