Learn CSS Preprocessor: compare sass and less

Article Introduction: The only thing that you really need to learn with CSS preprocessor is the syntax, Sass is written in Ruby, but the syntax of both is not related. Do not know Ruby, still can use. All you need is an application like Cudekit to observe and compile the files you write. Less is not necessary, only need to call a JS can (run on the client), or with the help of Node.js (server running

What is a CSS preprocessor?

CSS allows you to do a lot of things, but it is to the browser, after all, for developers, CSS lacks many features, such as variables, constants and some programming syntax, code difficult to organize and maintain. Then the CSS preprocessor came into being. The CSS preprocessor defines a new language that generates files as a target, and then the developer simply uses the language to encode the work. The preprocessor can usually implement browser-compatible, variable, and structural functions, and the code is simpler and easier to maintain. "What kind of CSS preprocessor should I choose?" "is a hot topic on the Internet recently, and a lot of people are arguing about it. This has been a big improvement over the topic of whether we should use CSS preprocessor in the past. At present, the two most popular types of preprocessor are sass and less.

As for them who are better some: the short answer is: Sass

A slightly longer answer: SASS is better than any other preprocessor language, but if you're using less, it's cool! This can prove that you are using a preprocessor to write code that helps you write better.

Very long answer: Please continue to look down

Use the knowledge you need to learn before –ruby,js, command line, etc.

The only thing that you really need to learn with CSS preprocessor is the syntax, Sass is written in Ruby, but the syntax of both is not related. Do not know Ruby, still can use. All you need is an application like Cudekit to observe and compile the files you write. Less is not necessary, only need to call a JS can (run on the client), or with the help of Node.js (server run).

Winner: None.

Help for the CSS3

CSS3 offers many new features, such as gradients, animations, rounded corners, and so on, but when using these advanced features, we often need to write (-moz-、-webkit-、-ms-...). Whether sass or less, you can use your own mix to write. But when we need to modify these cumbersome prefixes in the project, how do we not return each line of code and update them? You probably won't be updating the files that are mixed manually. But in sass, we can use the Open source CSS framework to automatically update and process the browser prefix automatically. We just need to keep updating and occasionally click the Compile key, it will help us to automatically handle all the prefix problems, effortless. (-moz-、-webkit-、-ms-...). Whether sass or less, you can use your own mix to write. But when we need to modify these cumbersome prefixes in the project, how do we not return each line of code and update them? You probably won't be updating the files that are mixed manually. But in sass, we can use the Open source CSS framework to automatically update and process the browser prefix automatically. We just need to keep updating and occasionally click the Compile key, it will help us to automatically handle all the prefix problems, effortless.

Winner: Sass.

Logic/Loop

Less can be mixed in a defensive style, which takes effect only if the condition is true. For example, you want to set the background color according to the text color, when the text is relatively shallow background color is very deep, the text is darker when the background color is very shallow. Then you have to divide the mixture into two parts to make sure that there is a condition that is true and that the blending takes effect.

.set-bg-color (@ text-color) when (lightness (@ text-color)> = 50%) {
  background: black;
}
.set-bg-color (@ text-color) when (lightness (@ text-color) <50%) {
  background: #ccc;
}
Then you can get the desired background:

.box-1 {
  color: # BADA55;
  .set-bg-color (# BADA55);
}
Less simulates loops and recursion:

.loopingClass (@index) when (@index> 0) {
  .myclass {
    z-index: @index;
  }
  // recursion
  .loopingClass (@index-1);
}
// stop loop
.loopingClass (0) {}

// output
.loopingClass (3);
Generated css code:

.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}
But this is all the logic and loop processing capabilities of Less, and Sass has real language processing capabilities. Including if / then / else, for loop, while loop, function and so on.

Real For Loop:

@for $ i from 1 through 3 {
  .item-# {$ i} {
    width: 100px * $ i;
  }
}
Css:

.item-1 {width: 100px;}
.item-2 {width: 200px;}
.item-3 {width: 300px;}
For example, the Compass framework has a mix called "background", which will give you all the code you need and want, and is compatible with all browser code.

Concise and understandable code:

.bam {
  @include background (
    image-url ("foo.png"),
    linear-gradient (top left, # 333, # 0c0),
    radial-gradient (# c00, #fff 100px)
  );
}
Now it's this monster's turn (unfortunately, we need it and see the Css code we will get):

.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

inherit
After you declare a class that contains some styles, you want another class that is only slightly different from it. In less you can write like this

.module-a {
 color: # 333;
}
.module-b {
 .module-a (); / * Copy all css code of module-a here * /
 border: 1px solid red;
}
This way .module-b inherits all the properties of .module-a.

.module-a {
 color: # 333;
}
.module-b {
 color: # 333;
 border: 1px solid red;
}
This is essentially inheritance, and you can do the same in Sass. But Sass's "@extend" is better. In "@extend", the style of .module-a is not just copied to .module-b (can be extended), the definition of .module-a in Css is Change to .module-a, .module-b (this makes the selector more efficient).

Sass code

.module-a {
  / * A bunch of css code * /
}
.module-b {
  / * Some coverage and extension code * /
  @extend .module-a;
}
Finally compile Css code

.module-a, .module-b {
  / * A bunch of css code * /
 }
.module-b {
  / * css code * /
}
The result is a more efficient selector rewritten by Sass Winner: Sass

variable
Variable prefix: less uses "@" and sass uses "$". In the css, the @ symbol has the meaning of inheritance, while the dollar sign does not. We can say that this is a personal preference. But Sass, which has no confusion, has an advantage here. But Sass's variable scope is a bit weird. If you override a global variable in the local environment, the value of the global variable will be changed.

$ color: black;
.scoped {
  $ color: white;
  color: $ color;
}
.unscoped {
  // LESS = black (still the value black defined at the beginning)
  // SASS = white (rewritten as white)
  color: $ color;
}
Winner: Less

Media inquiry
The way we started using media queries was to add media code blocks for media queries at the bottom of the main style sheet. This is useful, but it will cause the responsive style to be disconnected from the original style. CSS code:

.some-class {
   / * Basic style * /
}

/ * After many lines * /

@media (max-width: 800px) {
  .some-class {
    / * Response style * /
  }
}
With Sass or Less, we can write them together using nesting:

.some-class {
  / * Basic style * /
  @media (max-width: 800px) {
    / * Response style * /
  }
}
With Sass, we can even be a little more aggressive and use a cooler way of writing:

= 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
We can then use this technique to make the code more concise and semantic

.column
    width: 25%
    + respond-to (small-screen)
      width: 100%
Environment that requires Sass 3.2 (installation method, enter "gem install sass -pre" in Start Command Prompt with Ruby)

Operation
In most cases, mathematical operations are very similar. But sass and less are a little different in the suitability of the processing unit. For example, less will assume that the first unit is what you want, and ignore the latter:

div {
   width: 100px + 2em; // == 102px (weird)
}
But in Sass you get a clear error message: incompatible units "px" and "em". I think it's debatable whether errors should be prompted, but in contrast I want to get errors, especially when I'm dealing with variables that are difficult to trace. sass allows us to use unknown units, but less cannot. At the same time, they have some other differences, such as how sass does multiplication for unity values, but these are too simple to be discussed further.

Winner: Sass

In summary, although Sass is a bit harder to get started than less, if you want to use the Css preprocessor, it is worth spending more time on Sass.

English text: http://css-tricks.com/sass-vs-less/

References: http://sass-lang.com/