Both Sass and Less are CSS preprocessors.
From keycdn.com
A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.
So Sass and Less don't change the functionality of CSS, as they are compiled into plain old CSS. What they do is make it easier to write and maintain CSS with tools such as mixins, nesting, variables, and more.
SCSS, which stands for 'Sassy CSS' is one of two syntaxes for Sass.
From the sass reference:
The second and older syntax, known as the indented syntax (or sometimes just "Sass"), provides a more concise way of writing CSS.
The difference
Both Sass and Less have very similar features. There are syntactical differences, for example, Sass uses $ for variables whereas less uses @ .
There are some slightly more subjective differences, this website claims that "LESS Has More User-Friendly Documentation Than SCSS", however personally I have found the SCSS documentation and examples very easy to use.
Reddit
reddit.com › r/webdev › eli5: sass vs. less
r/webdev on Reddit: ELI5: SASS vs. LESS
March 2, 2014 -
hey guys,
i'm starting to get into web development on my own, just wanted a cool new hobby and I've always wanted to design my own website. I just finished the courses on html, CSS and Java from codeacademy. From browsing this forum and talking to people, I foudn out about SASS and LESS too, extremely interesting, i didn't even know about them when I first started! Just a question, I've been researching, but I still don't know the difference between SASS and LESS, can someone help? Which one is better to do? What do most professional use? and lastly, why are SASS and LESS better than CSS itself?
EDIT: changed "learning" to finishing courses on codeacademy, since I know there is a ton more to learn.
Top answer 1 of 5
98
I would suggest that you stick with CSS for some time and not bother with fancy stuff like LESS, SASS, CoffeScript, HAML and lots of other cool sounding names. These are helpful but an overkill for beginners like you. Start with the basics, create vanilla HTML + CSS websites, maybe sprinkle them with some JavaScript. Learn to create semantic html, modular css, adopt consistent naming conventions, learn about cross-browser issues. After you've done a couple of static websites, start experimenting :) Include some css preprocessors, html preprocessors, css frameworks or js frameworks in you workflow. Also, not Java but JavaScript. These are different languages. DO invest time in learning JavaScript (not jQuery!!!), all its quirks, strengths and weaknesses. P.S. I prefer SASS. A small clarification: i did not suggest to not learn jQuery, it's a great tool that saved my sanity many times. I suggested that the beginner should learn JavaScript first and only then - jQuery. Why? the abundance of jQuery plugins that duplicate native JavaScript functions, clearly people are not aware of js standart library i've interviewed lots of people who claim that they know jQuery language (wait what?), but when you bring up JavaScript in conversation you get a blank stare in response http://www.doxdesk.com/img/updates/20091116-so-large.gif (i know it's fake) People are lazy. Many of those who go straight for jQuery, never care to look back - see what's under the hood and learn JavaScript properly.
2 of 5
28
They are essentially the same, preprocessors for css. Only real difference is SASS was written in Ruby and LESS in JS. You are able to write your own mixins (think of methods from Java), define variables, and separate out your css into partials (kinda like classes in Java). You can also nest selectors within one another, however rule of thumb is if you nest more than 4 times, you're doing it wrong. Both accomplish one major concept, DRY - don't repeat yourself. It boils down to preference. I prefer SASS, but I have nothing against Less.
GeeksforGeeks
geeksforgeeks.org › css › what-are-the-differences-between-less-and-sass
What are the differences between LESS and SASS? - GeeksforGeeks
January 13, 2025 - LESS: Simpler syntax, JavaScript-based, and integrated into projects quickly. SASS: Offers advanced features, is more robust, and supports two syntaxes (SCSS and indented).
What is SASS and LESS - HTML & CSS - SitePoint Forums | Web Development & Design Community
Hi, I checked your already asked questions but they all seem to be about SASS vs LESS or problems using them. My Problem is - what are they? I am used to using CSS but really do not understand where SASS and LESS fit into the picture. I keep seeing articles about pre-compilers and I understand ... More on sitepoint.com
0
September 3, 2020LESS vs SASS/SCSS
Jacob Miranda is having issues with: Are there any differences between the two and is there one you guys prefer to choose? And how should I go about using one or the other? ... More on teamtreehouse.com
5
October 2, 2013Explain Like I'm Five: What is SASS and LESS?
I'll try to give a simpler explanation, since kevan pointed out that menno's was a little high-level. SASS and LESS are just like CSS except with lots of shortcuts to write things in a much shorter way that you would with just CSS. The simplest example is using a variable. You can write "$brand_color: #FF0000" at the top of your SASS file, and then later on use $brand_color exactly like you would use the hex color like #FF0000. This is most useful when you use it in several places: then if your client decides his brand color is now #00FF00, you just need to change "$brand_color: #FF0000" to "$brand_color: #00FF00" once and that's it. Otherwise you would have to track down every place you used the brand colour and change them individually. You can set more complicated things called mixins too. A common example is to define a mixin called button, which you would use whenever you want to define a button. Mixins are very powerful because they can be modified by parameters. This means that if you realise that the CSS you wrote for two different buttons is identitical apart from some widths, because one button is bigger than the other, you could write a mixin that takes this number as an argument, and then you would not need to repeat yourself. Nesting is really nice because it means you write less. It's hard to explain, just look at the example on the SASS homepage . Because these are all "shorthands" for longer CSS, you need to first turn your SASS file into an actual CSS file, which just consists of expanding your SASS shortcuts into real CSS. For example whenever it encounters @text_color, it replaces it with #FF0000. This is called the compilation step; it is a program on your computer that you need to run, which outputs your CSS file. More on reddit.com
10
20
July 8, 2013LESS vs SASS for Kendo UI for jQuery in Kendo UI for jQuery | Telerik Forums
Hi, Forgive me if this has been answered before, but I haven't been able to find it.What would be the reasons to chose LESS over SASS or vice-versa when... More on telerik.com
Videos
07:40
LESS and SASS - YouTube
11:16
LESS vs SASS in 2019 - YouTube
10:21
SASS or LESS? What should you use? - YouTube
06:43
Why you should use a CSS Preprocessor! SASS, LESS are Better than ...
10:22
SASS vs LESS - comparison - YouTube
06:27
Sass vs LESS vs Stylus vs PostCSS - CSS Preprocessors - YouTube
Top answer 1 of 2
57
Both Sass and Less are CSS preprocessors.
From keycdn.com
A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.
So Sass and Less don't change the functionality of CSS, as they are compiled into plain old CSS. What they do is make it easier to write and maintain CSS with tools such as mixins, nesting, variables, and more.
SCSS, which stands for 'Sassy CSS' is one of two syntaxes for Sass.
From the sass reference:
The second and older syntax, known as the indented syntax (or sometimes just "Sass"), provides a more concise way of writing CSS.
The difference
Both Sass and Less have very similar features. There are syntactical differences, for example, Sass uses $ for variables whereas less uses @ .
There are some slightly more subjective differences, this website claims that "LESS Has More User-Friendly Documentation Than SCSS", however personally I have found the SCSS documentation and examples very easy to use.
2 of 2
15
SCSS and LESS are both "supersets" of vanilla CSS. That means valid CSS is automatically also valid SCSS and LESS, but not necessarily the other way around.
The difference between SCSS and LESS is that they have a different syntax. They mostly have the same functionalities.
Frontend Mentor
frontendmentor.io › articles › css-preprocessors-sass-or-less-which-to-choose-JOI20I1xNL
Sass vs Less | Which CSS Preprocessor to Choose
January 23, 2024 - It was created to solve the indentation syntax issue with Sass, which many developers found unintuitive. Less adopts a similar syntax to that of standard CSS.
Zion & Zion
zionandzion.com › less-vs-sass
Less vs. Sass: Which CSS Preprocessor is Right for You? | Zion & Zion
October 7, 2021 - While both languages feature extensive documentation that address any possible CSS scenario, I find Less’ documentation more user friendly. Their sticky sidebar displays the user’s positioning on the page, while also allowing them to quickly jump around the documentation. While Sass’ documentation also features a sidebar, it’s not sticky—so when a user reads past a certain point, they must scroll up to the top or scroll aimlessly just to find the content they’re searching for.
KeyCDN
keycdn.com › blog › sass-vs-less
CSS Preprocessors - Sass vs Less - KeyCDN
Sass and Less are both very powerful CSS extensions. You can think of them as more of a programming language designed to make CSS more maintainable, themeable, and extendable. Both Sass and Less are backward compatible so you can easily convert your existing CSS files just by renaming the .css file extension to .less or .scss, respectively.
IONOS
ionos.com › digital guide › websites › web development › sass
SASS vs LESS vs SCSS - That are the differences - IONOS
October 12, 2020 - Code in LESS is automatically a superset of CSS: All source text formulated in CSS also functions in LESS – just like with SCSS. SASS is much more popular among web designers. But this could be because SASS is a bit older. LESS was originally supported by the well-regarded frontend framework Bootstrap, which relied on the younger preprocessor.
SitePoint
sitepoint.com › html & css
What is SASS and LESS - HTML & CSS - SitePoint Forums | Web Development & Design Community
September 3, 2020 - Hi, I checked your already asked questions but they all seem to be about SASS vs LESS or problems using them. My Problem is - what are they? I am used to using CSS but really do not understand where SASS and LESS fit into the picture. I keep seeing articles about pre-compilers and I understand Bootstrap uses SASS or LESS but I only see CSS and JS files but then I see some .map files that seem to be linked in some way to CSS or SASS or LESS but then I read that .map files are used in JS.
DEV Community
dev.to › mwong068 › sass-vs-less-which-do-you-prefer-1764
Sass vs Less: Which do you prefer? - DEV Community
July 30, 2020 - Sass lets you use features that ... goodies that make writing CSS fun again. ... Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS....
Udemy
blog.udemy.com › home › less vs. sass – which css preprocessor is best for you?
Less vs. Sass - Which CSS Preprocessor is Best For You? - Udemy Blog
December 4, 2019 - Sass expands on the concept of inheritance with selector inheritance, which groups selectors with identical values. ... Less features a “guarded mixin” capability, which are mixins (or classes that contain numerous methods from other classes) ...
Laracasts
laracasts.com › discuss › channels › laravel › sass-vs-less
SASS vs. LESS
We cannot provide a description for this page right now
Top answer 1 of 5
3
I think Chris Coyier wrote a great and unbiased article on the two.
http://css-tricks.com/sass-vs-less/
It seems they accomplish the same thing, in slightly different ways.
Just two months ago I started using sass. (And I'm using the scss syntax as it's more comfortable, and more like traditional css with the brackets).
I just eventually dove into it, combed through the sass documents as I built, try to go back through and use variables, mixins, etc as much as possible. It will slow down your css development at first, but soon enough you'll be faster at writting css, plus some of the features it has is freaking cool.
Another reason I chose sass is because I wanted to try out the compass framework with it.
As far as a preproccessor, I use Scout (free) on my work PC, and right now Scout (free) on my mac, but am seriously contemplating using CodeKit ($20-$25) for my mac.
2 of 5
1
Just like to write a quick reply:
SCSS / SASS!
Reddit
reddit.com › r/css › explain like i'm five: what is sass and less?
r/css on Reddit: Explain Like I'm Five: What is SASS and LESS?
July 8, 2013 -
Something to do with css but that's as far as I am at this point in time.
Top answer 1 of 4
13
I'll try to give a simpler explanation, since kevan pointed out that menno's was a little high-level. SASS and LESS are just like CSS except with lots of shortcuts to write things in a much shorter way that you would with just CSS. The simplest example is using a variable. You can write "$brand_color: #FF0000" at the top of your SASS file, and then later on use $brand_color exactly like you would use the hex color like #FF0000. This is most useful when you use it in several places: then if your client decides his brand color is now #00FF00, you just need to change "$brand_color: #FF0000" to "$brand_color: #00FF00" once and that's it. Otherwise you would have to track down every place you used the brand colour and change them individually. You can set more complicated things called mixins too. A common example is to define a mixin called button, which you would use whenever you want to define a button. Mixins are very powerful because they can be modified by parameters. This means that if you realise that the CSS you wrote for two different buttons is identitical apart from some widths, because one button is bigger than the other, you could write a mixin that takes this number as an argument, and then you would not need to repeat yourself. Nesting is really nice because it means you write less. It's hard to explain, just look at the example on the SASS homepage . Because these are all "shorthands" for longer CSS, you need to first turn your SASS file into an actual CSS file, which just consists of expanding your SASS shortcuts into real CSS. For example whenever it encounters @text_color, it replaces it with #FF0000. This is called the compilation step; it is a program on your computer that you need to run, which outputs your CSS file.
2 of 4
4
They are both languages that extend the standard CSS syntax (although differently) with some really handy constructs. There's nothing you can do with LESS or SASS that you can't with CSS since it all boils down to CSS anyway, but it makes it easier and more convenient to express certain things. LESS can be run in the browser with JavaScript. This prevents the need to recompile all the LESS files when one is changed but it also impacts performance so it's not recommended in a live setting. http://lesscss.org/ SASS is fully precompiled. http://sass-lang.com/
Cynoteck
cynoteck.com › blog-post › sass-vs-less-what-to-choose
SASS vs LESS: What to Choose?
November 19, 2025 - LESS is written in JavaScript and aggregates information extremely quickly, and compiles data at a faster rate. It likewise helps in keeping the code secluded and makes it readable and variable.
Revelo
goalto.io › blog › sass-vs-less-which-css-preprocessor-is-right-for-you
Sass vs. Less: Which CSS Preprocessor is Right for You?
Find, hire, and pay pre-vetted engineers from LatAm's largest tech talent network. We handle payroll, benefits, taxes. No upfront fees, no lock-ins.
CSS-Tricks
css-tricks.com › sass-vs-less
Sass vs. Less | CSS-Tricks
January 10, 2020 - In both cases, the onus is on you to keep the preprocessor software itself up to date as well as these libraries. I also find that easier in Sass in general. For instance, Compass updates will just come automatically in CodeKit, or you use a Gem which is easy to update, while Less mixins you’ll have to manually update a file yourself.
Telerik
telerik.com › forums › less-vs-sass-for-kendo-ui-for-jquery
LESS vs SASS for Kendo UI for jQuery in Kendo UI for jQuery | Telerik Forums
October 4, 2021 - In terms of the usage - the Sass-based themes have different architecture that allows for great customization options (variables, component base metrics, typography, creating swatches, etc.) which are not available or hard to achieve with the Less-based themes.
OutSystems
outsystems.com › forums › discussion › 7904 › re-less-and-sass
Re : LESS and SASS | OutSystems
What about now? I tried cannot..Still not supported or maybe we need some tricks to make it work · I also miss so much a way to better organize CSS. I think this has been overlooked for quite some time in Service Studio. A preprocessor would be great, as would having CSS variables (self-promotion ...
Medium
medium.com › @lelianto.eko › css-preprocessors-sass-vs-less-393cd6621467
CSS Preprocessors: Sass vs Less. CSS Preprocessors are scripting… | by Lelianto Eko Pradana | Medium
February 5, 2023 - On the other hand, Less uses a syntax that is more concise and straightforward, which can be an advantage for those who are new to CSS preprocessor. Variables: Both Sass and Less support the use of variables, which allow developers to store values for later use.
Wikipedia
en.wikipedia.org › wiki › Less_(style_sheet_language)
Less (style sheet language) - Wikipedia
March 26, 2024 - Less is inspired by Sass. Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax.