Advantages and disadvantages of sass and less, and sassless

Advantages and disadvantages of sass and less, and sassless

Sass is a dynamic style language. It has many more functions than Css, such as variables, nesting, operations, inheritance, color processing, and functions. It is easy to read. The Ruby environment needs to be installed for the installation of Cass, which is processed by the server. Less is required to be introduced. js to process the code and output css to the browser. You can also use Less in the development stage, compile it into a css file, directly put it in the project, with less. app, SimpleLess, CodeKit. tools such as apps also have online editing addresses.

I accidentally discovered that I began to use LESS firmly. CSS itself has never been a problem for me, but I'm curious about the idea of using variables to create something for my website or template along a color palette. Having a color disk that provides a fixed number of options can help me avoid color skipping from a fixed style.

 

It turns out that LESS -- and Sass -- functions are much more than that. LESS and Sass have some similarities in syntax, such as the following:

● Mixins)-- Class in class;

●Parameter Mixing-- Class that can pass parameters, just like a function;

●Nested rules-- Nested Class in class to reduce repeated code;

●Operation-- Mathematics is used in CSS;

●Color Function-- You can edit the color;

●Namespace)-- Group style, which can be called;

●Scope-- Modify the style locally;

●JavaScript assignment-- Use a JavaScript expression to assign values in CSS.

The main difference between LESS and Sass is their implementation method. LESSS is based on JavaScript, so it is processed on the client.

On the other hand, Sass is Ruby-based and then processed on the server. Many developers do not choose LESS because the JavaScript engine requires additional time to process code and then output modified CSS to the browser. There are many ways to do this. I chose to use LESS in the development process. Once the development is complete, I copy and paste the LESS output to a compressed file, and then to a separate CSS file to replace the LESS file. Another option is to use LESS. app to compile and compress your LESS files. Both options minimize your style output to avoid any problems that may arise because your browser does not support JavaScript. Although this is unlikely, it is always possible.

LESS Is More

Introduction

Introducing LESS in your project is simple:

1. Download less. js;

2. Create a file to put your style, suchStyle. less;

3. Add the following code to your HTML

1. <Link rel = "stylesheet/less" type = "text/css" href = "styles. less">
2. <Script src = "less. js" type = "text/javascript"> </script>

Note the rel attribute of link. You need to use/less at the end of the attribute value to make LESS work. Then it is necessary to introduce scirpt after link. If you are using HTML5 syntax-why not? -- You can save type = "text/css" and type = "text/javascript ".

In fact, there is also a server-side LESS version. The simplest way to install LESS on the server is to use Node Package Manager (NPM, which is based on Node. js at first glance ).

Variable

If you are a developer, variables should be your best friend. If you want to reuse a message (color in this example), set it to a variable. In this way, you can ensure your consistency and reduce the complexity of scrolling code to search for color values, copy and paste. You can even add or subtract the HEX value you need to render to these colors. Let's take a look at the example:

1. @ Blue: # 00c;
2. @ Light_blue: @ blue ++ #333;
3. @ Dark_blue: @ blue-#333;

If we apply these styles to three Divs, we can see the gradient effect formed by the added and subtracted HEX values:

 

Gradient effect from @ light_blue to @ blue to @ dark_blue

The only difference between variables in LESS and Sass is that LESS uses @ and Sass uses $. There are also some differences in scope, which I will mention later.

Mixin)

Occasionally, we will create some style rules that will be used repeatedly in the style sheet. No one will prevent you from using multiple classes in an HTML element, but you can use LESS to complete it in the style sheet. To describe this, I wrote an example:

1. . Border {
2. Border-top: 1px dotted #333;
3. }
4. Article. post {
5. Background: # eee;
6. . Border;
7. }
8. Ul. menu {
9. Background: # ccc;
10. . Border;
11. }