TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

SASS vs. LESS

162 pointsby cobychappleabout 13 years ago

16 comments

micheljansenabout 13 years ago
I think the individual comparisons are good, but the conclusion is wrong. Yes, Sass is technically superior to Less; it can do a lot of things that Less cannot. That does not mean that you should use Sass over Less.<p>The truth is, for 99% of use cases they are exactly the same. Sass is a bit more mature and it allows more programming, so it is potentially more powerful than Less, but that also allows it to deviate for CSS further, which is not necessarily a good thing if you have to work with people who only know CSS.<p>I personally use Less because it helps me develop faster. Less is implemented in JavaScript, which means it can run in the browser. Less.js' "watch mode" is awesome for speeding up development: save your .less stylesheet and the browser immediately shows the new styles. This is something SASS cannot do and.<p>Finally, to correct some factual errors in the article: Less <i>does</i> allow some programming, loops etc. It's just incredibly awkward and barely useful, but you can use JavaScript (I used that to make this: <a href="https://github.com/micheljansen/dynamicgif.less" rel="nofollow">https://github.com/micheljansen/dynamicgif.less</a>). Also, the "Helping with CSS3" point is moot if you use <a href="http://lessprefixer.com/" rel="nofollow">http://lessprefixer.com/</a> and keep that updated.
评论 #3987443 未加载
评论 #3987302 未加载
SkyMarshalabout 13 years ago
He uses SASS and SCSS interchangeably. For anyone else not familiar with the difference:<p><i>"Sass consists of two syntaxes. The original syntax, called "the indented syntax" uses a syntax similar to Haml.[2] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" uses block formatting like that of CSS. It uses curly brackets to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively."</i><p><a href="http://en.wikipedia.org/wiki/Scss" rel="nofollow">http://en.wikipedia.org/wiki/Scss</a><p>Also:<p><i>"Sass and LESS both use the standard CSS syntax. This makes it extremely easy to convert an existing CSS file to either preprocessor. Sass uses the .scss file extension and LESS uses the .less extension. The basic Sass or LESS file can be setup like below:<p>...<p>As you may have noticed, this is just regular CSS, which compiles perfectly in both Sass and LESS. It’s important to note that Sass also has an older syntax, which omits semicolons and curly brackets. Although this is still around, it is old and we won’t be using it past this example. The syntax uses the .sass file extension and looks like this:"</i><p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/sass-v...</a>
评论 #3986203 未加载
astrofinchabout 13 years ago
What about stylus?<p><a href="http://learnboost.github.com/stylus/" rel="nofollow">http://learnboost.github.com/stylus/</a><p><a href="http://visionmedia.github.com/nib/" rel="nofollow">http://visionmedia.github.com/nib/</a><p>More?<p><a href="http://news.ycombinator.com/item?id=3945633" rel="nofollow">http://news.ycombinator.com/item?id=3945633</a><p>Some compiler geek should create a tool to translate code from one preprocessor to another, so mixin support would not be an issue.
评论 #3985642 未加载
Vekzabout 13 years ago
I've always considered SASS the only true successor to CSS.<p>LESS and SCSS are syntactically conservative. I feel they retain the grammatical conventions of CSS (curly braces) as a way to ease the learning curve for conservative developers.<p>They introduce developers to the powerful features (mixins, variables) of extended CSS. But retain their familiar CSS curly bracket syntax.<p>Eventually it makes sense for said conservative developers to take the next step and adopt SASS's clean syntax.
评论 #3985833 未加载
评论 #3985719 未加载
评论 #3985701 未加载
ricardobeatabout 13 years ago
That was an awkard conclusion on "Active Development". The total number of issues and pull requests on LESS dwarfs that of SASS, so a larger number of open/pending ones is natural. Some more numbers:<p><pre><code> Watchers: SASS: 1022 LESS: 5480 Forks: SASS: 138 LESS: 731 Total issues: SASS: 390 LESS: 809 Total pull requests: SASS: 62 LESS: 199 </code></pre> That's a clear win for LESS in my book.
评论 #3985655 未加载
creativityhurtsabout 13 years ago
LESS became popular thanks to Twitter Bootrstrap and to the fact that you don't need Ruby to use it, which is a big plus for Windows users.<p>I use them both on daily basis, SCSS &#38; Compass for a Sencha Touch project and LESS &#38; Bootstrap for web dev work, along side with CodeKit to compile them and the major difference that I see is the speed of compiling. The projects I work on are both pretty large and with many .scss/.less files but LESS compiles way faster for me and this is a big plus.<p>Also, LESS is pretty useful for rapid prototyping since you can use the less.js and skip the compiling part altogether.
评论 #3987375 未加载
评论 #3986992 未加载
评论 #3988160 未加载
评论 #3987757 未加载
jay_kyburzabout 13 years ago
So, at the point CSS becomes a programming language of its own I'd rather just use java script. Somebody should come up with some way to define you style data in JSON, then parse and process the data on load.
评论 #3986535 未加载
评论 #3986915 未加载
charlesrabout 13 years ago
Sass also has Susy, which is just a <i>superb</i> grid system. I can't adequately express in words how much I love this grid system. It's mahtava.<p><a href="http://susy.oddbird.net/" rel="nofollow">http://susy.oddbird.net/</a>
latchkeyabout 13 years ago
This is a really good writeup and I really appreciate the bit at the end about pull requests and issues as I do feel that developers should stay on top of their communities. That said, I like the mixin syntax of Less better and my favorite project Bootstrap uses Less, so I'll stick with Less.
评论 #3985680 未加载
评论 #3985708 未加载
评论 #3985563 未加载
c4urselfabout 13 years ago
Good write-up<p>Not sure on my history here but i'm pretty sure i remember only the SASS variant being available (no braces among other things) while LESS stuck to a more css-like grammar. later SCSS came along which was CSS grammar for SASS.<p>It seems like I've run into more projects using LESS -- anyone know of any statistics?
brikis98about 13 years ago
IMO, SASS ~= LESS, but Compass &#62; *. Damn shame that Twitter Bootstrap went with LESS.
评论 #3985752 未加载
Pkeodabout 13 years ago
It's Sass not SASS.<p><a href="http://sass-lang.com/" rel="nofollow">http://sass-lang.com/</a>
leetroutabout 13 years ago
The author makes the point that LESS uses the `@` for a variable identifier while SCSS uses `$` (and that he feels this is better) but CSS4 spec today says it will use `$` for parent selectors.<p><a href="http://www.w3.org/TR/selectors4/#subject" rel="nofollow">http://www.w3.org/TR/selectors4/#subject</a><p>I don't do a lot of FE dev but I can count the number of times I've used `@` on one hand. However, I could see myself making use of `$` as a parent selector quite often. How would SCSS adapt to this?
mambodogabout 13 years ago
As far as I'm concerned, Less, Sass and Stylus all provide the features for the way I like to write styles (DRY, with composability) so the main thing that influences which I'll use on a project is how easily it fits into the workflow. That means Stylus for Express projects, Sass for Python/Flask.<p>When I'm at my day job I use Less (well, more specifically Lessphp) for the simple reason that there's a Drupal module for it, which integrates very well with building Drupal sites.
wvsabout 13 years ago
That looping construct in LESS is rather reminiscent of C++ template metaprogramming. Or ML/Haskell without higher order functions.
tferrisabout 13 years ago
This comparison distracts from better stuff out there: <a href="http://therain.posterous.com/sass-scss-lessthey-all-suck" rel="nofollow">http://therain.posterous.com/sass-scss-lessthey-all-suck</a>
评论 #3987017 未加载
评论 #3986674 未加载