{"id":204,"date":"2012-07-01T00:25:11","date_gmt":"2012-07-01T06:25:11","guid":{"rendered":"http:\/\/www.crccheck.com\/blog\/?p=204"},"modified":"2015-10-11T22:28:48","modified_gmt":"2015-10-12T04:28:48","slug":"sass-vs-less","status":"publish","type":"post","link":"https:\/\/www.crccheck.com\/blog\/sass-vs-less\/","title":{"rendered":"SASS vs LESS"},"content":{"rendered":"<p>I started investigating CSS frameworks almost a year ago. Back then, the two main contenders were <a href=\"http:\/\/sass-lang.com\/\">SASS<\/a> and <a href=\"http:\/\/lesscss.org\" target=\"_blank\">LESS<\/a>. Well, there&#8217;s really three contenders if you count SASS and SCSS separately, but between those two, SCSS &#8220;won&#8221;, and in the future, when I say SASS, I mean SCSS. Based on hearsay on the Internet, people seemed to lean towards SCSS. Fast-forward a year, and it looks like little has changed. Well, one thing did change: <a href=\"http:\/\/twitter.github.com\/bootstrap\/\" target=\"_blank\">Bootstrap<\/a> came out, and in a big way. Bootstrap uses LESS, and I liked the markup and CSS for Bootstrap (the JavaScript not so much, but more on that later). So I thought I would get some first-hand experience with LESS. At this point, I&#8217;ve only played around with LESS for a few days, but so far I am not liking what I find. Even if you&#8217;re not using Compass, SCSS seems like the superior solution. LESS does have its places though. If I ever start working on my browser based IRC client, I plan on switching to LESS because I need to generate CSS on the client&#8217;s side. Now for a brief satellite-level overview of both of these CSS frameworks:<\/p>\n<h2>SASS (SCSS)<\/h2>\n<h3>Pros:<\/h3>\n<ul>\n<li>Compass<\/li>\n<li>Better command-line interface<\/li>\n<li>Command-line watch mode<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>None?<\/li>\n<\/ul>\n<h2>LESS<\/h2>\n<h3>Pros:<\/h3>\n<ul>\n<li>In-browser mode<\/li>\n<li>Mixes units better (px + em)<\/li>\n<\/ul>\n<h3>Cons:<\/h3>\n<ul>\n<li>In-browser mode<\/li>\n<li>No frameworks close to the level of Compass<\/li>\n<\/ul>\n<h2>Syntax Examples<\/h2>\n<p>Well I don&#8217;t really have an opinion about $ vs @. Not sure if I like how @ mirrors @import and @media rules, or if I dislike how they&#8217;re sharing the same <a href=\"http:\/\/en.wikipedia.org\/wiki\/Sigil_(computer_programming)\" target=\"_blank\">sigil<\/a> as real CSS rules.<\/p>\n<h3>Variables<\/h3>\n<p>SCSS: <code>$blue: #3bbfce;<\/code><\/p>\n<p>LESS: <code>@blue: #3bbfce;<\/code><\/p>\n<h3>Mixins<\/h3>\n<p>SCSS: <code>@mixin left($dist) { float: left; margin-left: $dist; }<\/code><\/p>\n<p>LESS: <code>.left (@dist) { float: left; margin-left: @dist; }<\/code><\/p>\n<h3>Command Line<\/h3>\n<p>There&#8217;s a Ruby gem for LESS that I haven&#8217;t tried that might be better, but the SASS gem is far superior to the npm LESS module.<\/p>\n<p>SASS<\/p>\n<pre>$ # if you don't specify anything, reads from stdin\r\n$ sass\r\n\r\n$ sass --help | head -4\r\nUsage: sass [options] [INPUT] [OUTPUT]\r\n\r\nDescription:\r\n\u00c2\u00a0 Converts SCSS or Sass files to CSS.\r\n$ sass --version\r\nSass 3.1.15 (Brainy Betty)<\/pre>\n<p>LESS<\/p>\n<pre>$ lessc\r\nlessc: no input files\r\n$ lessc --help\r\nusage: lessc source [destination]\r\n$ lessc --version\r\nlessc 1.3.0 (LESS Compiler) [JavaScript]<\/pre>\n<h2>Suckage<\/h2>\n<p>Google results for suckage, lower is better.<\/p>\n<p><a href=\"https:\/\/www.google.com\/search?q=sass+css+sucks\" target=\"_blank\">SASS<\/a>: About 2,890,000 results (0.26 seconds)<\/p>\n<p><a href=\"https:\/\/www.google.com\/search?q=less+css+sucks\" target=\"_blank\">LESS<\/a>: About 1,440,000 results(0.11 seconds)<\/p>\n<h2>About Compass<\/h2>\n<p>So I&#8217;ve mentioned something called <a href=\"http:\/\/compass-style.org\/\" target=\"_blank\">Compass<\/a> a few times now. If you don&#8217;t know what it is, it is basically SASS on steroids. The killer feature for me is easy sprite generation. With compass, you&#8217;ll never need to write a vendor prefix. Just reading the source code for their mixins is a great way to familiarize yourself with browser hacks. For example, I used to just throw <code>display: inline-block<\/code> on elements, but I didn&#8217;t know about the differences between the browsers until I read <a href=\"https:\/\/github.com\/chriseppstein\/compass\/blob\/stable\/frameworks\/compass\/stylesheets\/compass\/css3\/_inline-block.scss\" target=\"_blank\">the source for the Compass mixin for inline-block<\/a>. If you use SASS but don&#8217;t want to deal with Compass, you can just copy their mixin. Some warnings about Compass: upgrading is dangerous. Sometimes they&#8217;ll change a mixin that will the way you&#8217;re using it. And sometimes their mixins won&#8217;t be the most convenient for IE compatibility. For example, to support linear gradients in old IEs, you have to add <a href=\"https:\/\/github.com\/chriseppstein\/compass\/blob\/7eb077aa102e9b25bfaa5f2b8eeaadb9f69902aa\/frameworks\/compass\/stylesheets\/compass\/css3\/_images.scss#L77-89\" target=\"_blank\">additional lines<\/a>, and these lines <a href=\"http:\/\/compass-style.org\/examples\/compass\/css3\/gradient\/\" target=\"_blank\">aren&#8217;t documented<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I started investigating CSS frameworks almost a year ago. Back then, the two main contenders were SASS and LESS. Well, there&#8217;s really three contenders if you count SASS and SCSS separately, but between those two, SCSS &#8220;won&#8221;, and in the future, when I say SASS, I mean SCSS. Based on hearsay on the Internet, people&hellip;<\/p>\n <a href=\"https:\/\/www.crccheck.com\/blog\/sass-vs-less\/\" title=\"SASS vs LESS\" class=\"entry-more-link\"><span>Read More<\/span> <span class=\"screen-reader-text\">SASS vs LESS<\/span><\/a>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[4],"tags":[42,46,44,45],"class_list":["entry","author-showmewhatyougot","post-204","post","type-post","status-publish","format-standard","category-technical","tag-css","tag-less","tag-sass","tag-scss"],"_links":{"self":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/comments?post=204"}],"version-history":[{"count":10,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions"}],"predecessor-version":[{"id":758,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions\/758"}],"wp:attachment":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/categories?post=204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/tags?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}