background

Since the birth of CSS, its basic syntax and core mechanism has not changed substantially, its development is almost expressive level of improvement. At the beginning of the role of CSS in the web page is just auxiliary decoration, easy to learn is the biggest demand. This also determines that CSS is a narrative language, not a programming language (programming languages have logic, variables, and conditional statements). However, with the development of the Internet, the complexity of web sites has been unmatched, and native CSS has become more and more difficult for developers. When a language’s capabilities are inadequate and the user’s environment does not support other options, the language becomes a “compilation target” language. Developers will choose another, higher-level language to develop in, and then compile to the underlying language for actual execution. Thus, in the front-end domain, CSS preprocessors were born, and CSS, the ancient language, “re-adapted” to the needs of web development in another way. The basic idea is to style a web page in a specialized programming language and then compile it into a normal CSS file. The ultimate goal is to improve the efficiency of web style writing. There are two types of CSS preprocessors: Sass and Less.

What is the relationship between Sass and Scss?

The indentation syntax of Sass is not intuitive for Web developers who are used to writing front-end CSS and cannot add CSS code to Sass. Therefore, the syntax of Sass was improved and Sass 3 became Scss(SASSy CSS). Compatible with the original syntax, except that {} replaces the original indentation. Less is also a dynamic style language. Add dynamic language features to CSS, such as variables, inheritance, operations, and functions. Less runs both on the client (IE 6+, Webkit, Firefox) and on the server (with Node.js).

How to use Less?

The most basic way to do this is to add a less-.js file to the page, just like you would with the jQuery library. For details, visit the less website. A more convenient alternative is to install IDE plugins. For example, if you use Sublime, install a less plugin and use less directly in your code. The compiler automatically translates the CSS code to you.

Functions and features of Less

We use Less to increase the efficiency of web development. Here are the features in Less:

  • Document segmentation

As pages become more complex, the CSS files that need to be loaded become larger and larger, and it is necessary to break up large files that are otherwise difficult to maintain. Traditional CSS sharding schemes are basically CSS native @import directives or loading multiple CSS files on HTML, which do not meet performance requirements. The CSS preprocessor extends the @import directive’s ability to recombine shard files into one large file through compilation. On the one hand, this solves the problem of inconvenient maintenance of large files, on the other hand, it also solves the performance problem of loading a bunch of small files. 1. Import less files. The suffix @import “main” can be omitted. // Equivalent to @import “main.less” 2. reference less is the most powerful feature of the class, using the imported less file but not compiling it. /*Less*/ @import (reference) “bootstrap.less”; #wrap:extend(.navbar all){} > import external files with @import (reference).

3. once(tO be added) 4.Copy the code
  • modular

Taking the idea of file segmentation a step further, it’s called modularity. When a large CSS file is properly shred, the relationship between these smaller files should be a tree structure. The root nodes of the tree are called “entry files” and the other nodes of the tree are called “module files”. Entry files typically depend on multiple module files, which may also depend on other modules further down the tree. Here is a simple example:Entrance to the fileentry.stylThe required modules are introduced at compile time, generatingentry.cssAnd then referenced by the page.) If you’ve used any other programming language with a modular mechanism, you already know that modularity is a great way to organize code and is an important way for developers to structure their code. Module can clearly realize the hierarchical code, reuse and dependency management, so that the development process of CSS can also enjoy the convenience of modern program development.

  • Selector nesting

Selector nesting is a way of organizing code within a file that allows a hierarchy of related rules. In the past, if we wanted to achieve this goal, we could only write:

.nav {margin: auto /* horizontal center */; width: 1000px; color: #333; }. Nav li {float: left /* horizontal */; width: 100px; } .nav li a {display: block; text-decoration: none; }Copy the code

This method requires us to manually maintain the indentation relationship, when the upper selector changes, all the related lower selector must be modified; In addition, it’s hard to read each rule on a single line, and it’s awkward to comment a single statement (you have to insert it between the statements). In CSS preprocessing languages, nested syntax makes it easy to express hierarchical relationships between rules, and it is clear and readable to comment a single declaration:

.nav { margin: auto; // Horizontal center width: 1000px; color: #333; li { float: left; // Width: 100px; a { display: block; text-decoration: none; }}}Copy the code
  1. Ampersand: represents the name of the selector at the previous level
  2. Media Enquiries (to be added)
  • variable

All property values in CSS are “magic numbers” until changes occur. You don’t know where this value came from or what it means. Once we have variables, we can give these “magic numbers” names that are easy to remember, read, and understand. As we will see, variables are a simple and effective way of abstracting when a particular value is used in more than one place, eliminating this repetition. It makes it easier for developers to achieve the same visual style of the site, and also makes it easier to “skin” the need. /*Less*/ @color: #999; @bgColor: skyblue; // do not add quotes @width: 50%; #wrap { color: @color; width: @width; } /* Generate CSS */ #wrap {color: #999; width: 50%; } define variables beginning with @, and type the @ name directly when used. In our daily work, we can save commonly used variables in a file, which is conducive to the organization of code maintenance. 2. Selector variable (to be added) 3. Attribute variable (to be added) 4. Url variable (to be added) 5. Declare variable > structure: @name: {attribute: value; }; Use: @ the name ();

``` /*Less*/ @background: {background: red; }; #main { @background(); }; @Rules: { width: 200px; hieght: 200px; border: 1px solid red; }; #con { @Rules(); } /* Generated CSS */ #main {background: red; }; # con { width: 200px; height: 200px; border: 1px solid red; }Copy the code
6. Variable operation > Take the unit of the first data as the base when adding and subtractingCopy the code
/* Less */ @width:300px; @color:#222; #wrap{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; } /* Generated CSS */ #wrap{width:280px; height:200px; margin:1400px; color:#444; background-color:#333; }Copy the code
7. Variable scope proximity principle * Mixed methods methods are like collections of declarations; when used, just type their names.Copy the code

/* Less /.card {// equivalent to.card() background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card; // equivalent to.card(); } / / create CSS */ #wrap{background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); }

Where '.card 'and'.card() 'are equivalent, I choose to use'.card() 'for clarity. Important: both '. 'and' # 'can be used as method prefixes. Method after writing '()' to see personal habits.Copy the code