SASS vs. LESS
“Which preprocessor language should be used for CSS?” Is a very relevant issue lately. Several times I was asked about it personally, and it would seem that every couple of days this question was raised on the net. It is very nice that the conversation has moved from the topic of the pros and cons of preprocessing to discuss which language is the best. For the cause!
To be brief: SASS.
Slightly detailed answer: SASS is better on all points, but if you are already happy with LESS - this is cool, at least you have already simplified your life using preprocessing.
')
Detailed answer: below
The only item is syntax. To compile the files you created, use an application like CodeKit . You should know the basics of Ruby or the command line or something else. Perhaps you should know this, but not necessarily, so it does not play a big role.
Winner: no.
With any of the languages, you can create your own impurities to simplify life with prefixes. So there is no winner. But do you know how to do so in order not to update these prefixes in your projects? (No, you do not know). Also, you probably will not have to update your own file with impurities. SASS allows you to use Compass , due to which auto updates you can forget about problems with prefixes. Of course, you can update the software and compile it from time to time, but this is a trivial task and you shouldn’t dwell on it.
So it all comes down to the following: SASS has Compass, but LESS does not . In fact, everything is a bit more confusing. All attempts to create a Compass type project for LESS failed. The fact is that LESS is not a strong enough language to do this correctly. A little more detail will be below.
Winner: SASS
LESS allows you to create "protected impurities." These impurities will take effect only if the condition is true. Suppose you want to change the background color, which will depend on the current text color. If the text color is “light enough” you probably want to make a dark background. If it is “dark enough”, you will want a light background. In this way, you will have an admixture divided into two parts with these “advocates”, which guarantee that only one of them will be executed.
LESS
After use, you will get a suitable background:
LESS
It is very simple, but the essence, I hope, is clear. You can do things much cooler than that. LESS also allows you to do self-referencing recursions, the impurities of which can cause themselves with updated values.
LESS
This is where the logic / cycles in LESS end. SASS has actual logical and cyclic operators. if / then / else, for loop, while loop and each loop. Without any tricks, real programming. SASS is a fairly reliable language, which makes it possible to use Compass.
For example, Compass has an admixture of
Laconic piece of code:
SCSS
This code turns into a monster below (which, unfortunately, is needed for cross-browser compatibility):
CSS
Winner: SASS
LESS site is more beautiful and comfortable . This is not to say that the SASS documentation is terrible, it is quite well filled and you can find everything your heart desires in it. But as practice shows, the front-end developer attracts a beautiful interface, which gives LESS an advantage. Undoubtedly, this plays a big role and LESS wins this game. Although everything can change .
Winner: LESS
Suppose you have created a class with a certain set of styles. Then you will need to create another one, which will be the same as the previous one, but with some additions. LESS allows you to do this like this:
LESS
In fact, this is the usual "include". You can also use this insert in SASS, but it is better to do this using
SCSS
Compiled into:
CSS
Do you see it? SASS overrides selectors, and this is a more efficient way.
Winner: SASS
LESS uses @, SASS uses $. The dollar sign is not used in CSS, which cannot be said about @. It is used to declare @keyframes or @media blocks. You can assume that the use of one or another special character is a matter of taste, but I think that SASS has an advantage here because it does not confuse basic concepts.
SASS has a strange property - if you redefine the “global” variable “local”, the global variable will take its value. A bit strange.
SCSS
This trick may be useful, but it is not intuitive at all, especially if you are writing to Javascript.
Winner: you must throw a coin :)
Almost each of us, starting to work with the rules of
CSS
With SASS or LESS, you can combine these styles using attachments.
SCSS
“Respond-to” is a pretty cool SASS technique (see the code Chris Eppstein , Ben Schwarz , and Jeff Croft ).
SCSS
Then you can use them very succinctly:
SCSS
Note: to use this technique, you will need SASS 3.2, which is currently in alpha, you can install it with the command
Winner: SASS
Basically, the mathematical part in both languages is quite similar, but there are still some oddities in the processing of units of measurement.
For example, LESS will take the value of the first variable as a unit, ignoring all others.
LESS
SASS will give you a clear and concise understanding that there was a mistake here:
SASS allows you to perform mathematical operations with "unknown" units of measurement that may appear until the next update. LESS does not allow this. There are even more strange differences, for example, how SASS multiplies numbers with units of measurement, but this is not about today.
Winner: SASS (with a stretch)
While writing this article ...
Number of open questions LESS: 392
Number of SASS open questions : 84
Pool requests (pending) LESS: 86
Pool requests (pending) SASS: 3
Number of commits for the last month LESS: 11
Number of commits for the last month of SASS: 35
None of these points can firmly determine which project is more active, but it seems that the numbers prefer SASS. As I understand it, the main developers of both languages continue to work on these projects as soon as they have some free time between developing other new, equally important projects.
Winner: probably SASS
To be brief: SASS.
Slightly detailed answer: SASS is better on all points, but if you are already happy with LESS - this is cool, at least you have already simplified your life using preprocessing.
')
Detailed answer: below
Training schedule with Ruby and command line
The only item is syntax. To compile the files you created, use an application like CodeKit . You should know the basics of Ruby or the command line or something else. Perhaps you should know this, but not necessarily, so it does not play a big role.
Winner: no.
CSS3 help
With any of the languages, you can create your own impurities to simplify life with prefixes. So there is no winner. But do you know how to do so in order not to update these prefixes in your projects? (No, you do not know). Also, you probably will not have to update your own file with impurities. SASS allows you to use Compass , due to which auto updates you can forget about problems with prefixes. Of course, you can update the software and compile it from time to time, but this is a trivial task and you shouldn’t dwell on it.
So it all comes down to the following: SASS has Compass, but LESS does not . In fact, everything is a bit more confusing. All attempts to create a Compass type project for LESS failed. The fact is that LESS is not a strong enough language to do this correctly. A little more detail will be below.
Winner: SASS
Language abilities: logic / cycles
LESS allows you to create "protected impurities." These impurities will take effect only if the condition is true. Suppose you want to change the background color, which will depend on the current text color. If the text color is “light enough” you probably want to make a dark background. If it is “dark enough”, you will want a light background. In this way, you will have an admixture divided into two parts with these “advocates”, which guarantee that only one of them will be executed.
LESS
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background: black; } .set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background: #ccc; } After use, you will get a suitable background:
LESS
.box-1 { color: #BADA55; .set-bg-color(#BADA55); }
It is very simple, but the essence, I hope, is clear. You can do things much cooler than that. LESS also allows you to do self-referencing recursions, the impurities of which can cause themselves with updated values.
LESS
.loop (@index) when (@index > 0) { .myclass { z-index: @index; } // Call itself .loopingClass(@index - 1); } // Stop loop .loopingClass (0) {} // Outputs stuff .loopingClass (10);
This is where the logic / cycles in LESS end. SASS has actual logical and cyclic operators. if / then / else, for loop, while loop and each loop. Without any tricks, real programming. SASS is a fairly reliable language, which makes it possible to use Compass.
For example, Compass has an admixture of
background , which is so powerful that you can put everything you want into it and end up with exactly what you need. Pictures, gradients, and any combination of them, separated by a comma - and you get the desired result (including prefixes and all the rest).
Laconic piece of code:
SCSS
.bam { @include background( image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) ); }
This code turns into a monster below (which, unfortunately, is needed for cross-browser compatibility):
CSS
.bam { background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px); }
Winner: SASS
Sites
LESS site is more beautiful and comfortable . This is not to say that the SASS documentation is terrible, it is quite well filled and you can find everything your heart desires in it. But as practice shows, the front-end developer attracts a beautiful interface, which gives LESS an advantage. Undoubtedly, this plays a big role and LESS wins this game. Although everything can change .
Winner: LESS
@extend concept
Suppose you have created a class with a certain set of styles. Then you will need to create another one, which will be the same as the previous one, but with some additions. LESS allows you to do this like this:
LESS
.module-b { .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; }
In fact, this is the usual "include". You can also use this insert in SASS, but it is better to do this using
@extend . @extend doesn't just copy styles from .module-a to .module-b (which .module-b file), it changes the name of the .module-a selector to .module-a, .module-b in compiled CSS (which is more efficient way).
SCSS
.module-a { /* A bunch of stuff */ } .module-b { /* Some unique styling */ @extend .module-a; }
Compiled into:
CSS
.module-a, .module-b { /* A bunch of stuff */ } .module-b { /* Some unique styling */ }
Do you see it? SASS overrides selectors, and this is a more efficient way.
Winner: SASS
Variable processing
LESS uses @, SASS uses $. The dollar sign is not used in CSS, which cannot be said about @. It is used to declare @keyframes or @media blocks. You can assume that the use of one or another special character is a matter of taste, but I think that SASS has an advantage here because it does not confuse basic concepts.
SASS has a strange property - if you redefine the “global” variable “local”, the global variable will take its value. A bit strange.
SCSS
$color: black; .scoped { $color: white; color: $color; } .unscoped { // LESS = black (global) // SASS = white (overwritten by local) color: $color; }
This trick may be useful, but it is not intuitive at all, especially if you are writing to Javascript.
Winner: you must throw a coin :)
Work with media rules
Almost each of us, starting to work with the rules of
@media , adds blocks with them at the bottom of the main styles page. This works, but leads to the separation of styles, for example:
CSS
.some-class { /* Default styling */ } /* Hundreds of lines of CSS */ @media (max-width: 800px) { .some-class { /* Responsive styles */ } }
With SASS or LESS, you can combine these styles using attachments.
SCSS
.some-class { /* Default styling */ @media (max-width: 800px) { /* Responsive styles */ } }
“Respond-to” is a pretty cool SASS technique (see the code Chris Eppstein , Ben Schwarz , and Jeff Croft ).
SCSS
=respond-to($name) @if $name == small-screen @media only screen and (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content
Then you can use them very succinctly:
SCSS
.column width: 25% +respond-to(small-screen) width: 100%
Note: to use this technique, you will need SASS 3.2, which is currently in alpha, you can install it with the command
gem install sass --pre . I think that there should be no doubt that this is a really useful thing in development.
Winner: SASS
Mematics
Basically, the mathematical part in both languages is quite similar, but there are still some oddities in the processing of units of measurement.
For example, LESS will take the value of the first variable as a unit, ignoring all others.
LESS
div { width: 100px + 2em; // == 102px (weird) }
SASS will give you a clear and concise understanding that there was a mistake here:
Incompatible units: 'em' and 'px' . Of course, this is a controversial question of which is better — an error or an incorrect value, but personally I am for the first. Especially if you prefer variables instead of using numbers, this makes it very difficult to keep track of them.
SASS allows you to perform mathematical operations with "unknown" units of measurement that may appear until the next update. LESS does not allow this. There are even more strange differences, for example, how SASS multiplies numbers with units of measurement, but this is not about today.
Winner: SASS (with a stretch)
Development
While writing this article ...
Number of open questions LESS: 392
Number of SASS open questions : 84
Pool requests (pending) LESS: 86
Pool requests (pending) SASS: 3
Number of commits for the last month LESS: 11
Number of commits for the last month of SASS: 35
None of these points can firmly determine which project is more active, but it seems that the numbers prefer SASS. As I understand it, the main developers of both languages continue to work on these projects as soon as they have some free time between developing other new, equally important projects.
Winner: probably SASS
Read
- Chris Eppstein: SASS / LESS Comparison
- Jeremy Hixon: An Introduction To LESS, And Comparison To Sass
- Ken Collins: Too LESS? Should You Be Using Sass?
- Johnathan Croom: Sass vs. LESS vs. Stylus: Preprocessor Shootout
Source: https://habr.com/ru/post/144309/
All Articles