What is the difference between Sass and Less

The difference between Sass and Less is: 1. Less runs on JS, and Sass is used on Ruby; 2. The way they write variables is different; 3. Only looping values ​​are allowed in Less, while Any type of data can be traversed in Sass; 4. Sass has Compass, and Less has Preboot.

#The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

Sass and Less are both CSS preprocessors, so what are the differences between them? This article will introduce to you the difference between Sass and Less, I hope it will be helpful to you.

First let’s take a lookWhat is a CSS preprocessor?

The CSS preprocessor is a scripting language that uses a specialized programming language to design Web page styles, and then converts them into normal CSS styles to build dynamic CSS. style.

The CSS preprocessor adds some programming features to CSS without having to consider browser compatibility issues.

Sass and Less are two common CSS preprocessors. We can convert the styles edited by Sass and Less into normal css styles.

The learning of CSS preprocessors is similar. Once we learn a CSS preprocessor, if necessary, switch to another CSS preprocessor. It's not difficult.

Let’s take a look atWhat is the difference between Sass and Less

1. Less runs on JS and Sass is used on Ruby.

Sass is based on Ruby and requires Ruby to be installed. Less and Sass are built similarly in Ruby, but it has been ported to JavaScript. In order to use LESS, we can upload the applicable JavaScript files to the server or compile the CSS table via an offline compiler.

2. The way to write variables is different.

Sass uses $, while Less uses @.

3. In Less, only circular values ​​are allowed.

In Sass, we can iterate over any type of data. But in Less, we can only use recursive functions to loop over values.

4. Sass has Compass, and Less has Preboot

Sass and LESS have extensions that can be used to integrate mixins (the ability to store and share CSS declarations throughout the site) .

Sass has Compass for mixins, which includes all available options as well as future supported updates.

LESS has Preboot.less, LESS Mixins, LESS Elements, gs and Frameless. Software support for LESS is more fragmented than Sass, resulting in many different extension options that may not all work the same way. For projects, we may need all listed extensions to get similar performance to Compass.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of What is the difference between Sass and Less. For more information, please follow other related articles on the PHP Chinese website!