Introduction to the less css framework, lesscss

[Go] Introduction to the less css framework, lesscss
Introduction

CSS (stacked style sheet) is a long-history markup language. Together with HTML, CSS is widely used in the World Wide Web. HTML is mainly responsible for defining document structures, CSS is responsible for defining document representations or styles.

As a markup language, CSS syntax is relatively simple and has low requirements on users, but it also brings some problems: CSS needs to write a large number of seemingly non-logical code, which is not easy to maintain and expand, it is not conducive to reuse. Especially for non-front-end development engineers, it is often difficult to write well-organized and easy-to-maintain CSS code due to lack of CSS writing experience, the major cause of these difficulties is that CSS is a non-procedural language without the concepts of variables, functions, SCOPE, and so on. LESS brings the gospel to Web developers. Based on the CSS syntax, it introduces functions such as variables, Mixin, operations, and functions, which greatly simplifies the compilation of CSS, it also reduces the maintenance cost of CSS. As its name says, LESS allows us to do more things with LESS code.

 

 

Principle and usage of LESS

Essentially, LESS includes a set of custom syntaxes and a parser. You can define your own style rules based on these syntaxes. These rules will eventually generate the corresponding CSS file through the parser. LESS does not crop the original features of CSS. Instead, it is not used to replace CSS. Instead, it adds the features of a procedural language to CSS based on the existing CSS syntax. The following is a simple example:

Listing 1. LESS files

 @color: #4D926F;  #header {   color: @color;  }  h2 {   color: @color;  }

The compiled CSS file is as follows:

Listing 2. CSS file

 #header {   color: #4D926F;  }  h2 {   color: #4D926F;  }

From the example above, it is very easy to learn LESS, as long as you understand the CSS basics, you can easily get started.

LESS can be used directly on the client or on the server. In actual project development, we recommend that you compile LESS files to generate static CSS files and apply them to HTML files.

Client

We can directly use the. less (LESS source file) in the client, just need to download the less. js file from the http://lesscss.org, and then add the following code in the HTML where we need to introduce the LESS source file:

<link rel="stylesheet/less" type="text/css" href="styles.less">

The LESS source file is introduced in the same way as the standard CSS file:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Note that when the. less file is introduced, the rel attribute must be set to "stylesheet/less ". Note that the LESS source file must be introduced before the introduction of less. js to ensure correct compilation and parsing of the LESS source file.

Server

The use of LESS on the server mainly relies on the LESS compiler to compile the LESS source file to generate the final CSS file. Currently, the common method is to install LESS using the node Package Manager (npm, after the installation is successful, you can compile the LESS source file in the node environment.

At the initial stage of project development, whether using the client or server, we need to find a way to introduce the CSS or LESS files we want to use to our HTML pages or bridge files, LESS provides a feature that we are very familiar with-Importing. We can use this keyword to introduce the. less or. css file we need. For example:

@ Import "variables. less ";

The extension name of the. less file can also be omitted, as shown in the following code:

@ Import "variables ";

The introduction of CSS is the same as that of the LESS file, but the. css suffix cannot be omitted.

Static CSS files generated by compilation

We can use the LESS compiler to compile the LESS file into a CSS file and introduce it in HTML articles. Note that LESS is fully compatible with CSS syntax. That is to say, we can directly change the standard CSS file to the. less format, which can be fully recognized by the LESS compiler.

 

 

Syntax variable

LESS allows developers to customize variables, which can be used in global styles. variables make style modification easier.

The following code describes how to use and use variables:

Listing 3 LESS files

 @border-color : #b5bcc7;  .mythemes tableBorder{    border : 1px solid @border-color;  }

The compiled CSS file is as follows:

Listing 4. CSS file

 .mythemes tableBorder {   border: 1px solid #b5bcc7;  }

From the code above, we can see that variables are reused at the VALUE level, and the same values can be defined as variables for unified management.

This feature is suitable for defining themes. You can define general styles such as background color, font color, and border attributes in a unified manner, so that different themes only need to define different variable files. Of course, this feature also applies to css reset (resetting style sheets). In Web development, we often need to block the default style behavior of the browser and need to redefine the style sheet to overwrite the default behavior of the browser. here we can use the LESS variable feature, in this way, style sheets can be reused between different projects. We only need to assign values to variables in different project style sheets as needed.

Variables in LESS can be reused like other programming languages. They also have a life cycle, that is, Scope ), simply put, it is the concept of local variables or global variables. The order of variables to be searched is first found in the local definition. If the local definition cannot be found, the upper-level definition is searched until it is global. The following is a simple example to explain the Scope.

Listing 5. LESS files

@ Width: 20px; # homeDiv {@ width: 30px; # centerDiv {width: @ width; // The width value of the recently defined variable 30px should be taken here} # leftDiv {width: @ width; // The width value of the previously defined variable 20px should be taken here}

The compiled CSS file is as follows:

Listing 6. CSS file

 #homeDiv #centerDiv {   width: 30px;  }  #leftDiv {   width: 20px;  }

Mixins)

The Mixins (mixed-in) function is no stranger to developers. Many dynamic languages support the Mixins (mixed-in) feature. It is an implementation of multi-inheritance. In LESS, mixing refers to introducing another defined CLASS in a CLASS, just like adding an attribute to the current CLASS.

Let's take a brief look at the use of Mixins in LESS:

Listing 7. LESS files

// Define a style selector. roundedCorners (@ radius: 5px) {-moz-border-radius: @ radius;-webkit-border-radius: @ radius ;} // use # header {in another style selector {. roundedCorners;} # footer {. roundedCorners (10px );}

The compiled CSS file is as follows:

Listing 8. CSS file

 #header {  -moz-border-radius:5px;  -webkit-border-radius:5px;  border-radius:5px;  }  #footer {  -moz-border-radius:10px;  -webkit-border-radius:10px;  border-radius:10px;  }

From the code above, we can see that Mixins is actually a kind of nesting, which allows a class to be embedded into another class for use. The embedded class can also be called a variable. In short, mixins are actually rules-level multiplexing.

There is also a form of Mixins called Parametric Mixins (mixed parameters). LESS also supports this feature:

Listing 9. LESS files

// Define a style selector. borderRadius (@ radius) {-moz-border-radius: @ radius;-webkit-border-radius: @ radius ;} // use the defined style selector # header {. borderRadius (10px); // pass 10px to the style selector as a parameter }. btn {. borderRadius (3px); // pass 3px as a parameter to the style selector}

The compiled CSS file is as follows:

Listing 10. CSS file

 #header {  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;  }  .btn {  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  border-radius: 3px;  }

We can also define a default value for a Mixins parameter, as shown in figure

Listing 11. LESS files

.borderRadius(@radius:5px){  -moz-border-radius: @radius;  -webkit-border-radius: @radius;  border-radius: @radius;  }  .btn {  .borderRadius;  }

The compiled CSS file is as follows:

Listing 12. CSS file

 .btn {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  }

Like arguments in JavaScript, Mixins also has such a variable: @ arguments. @ Arguments is a special parameter in Mixins. When Mixins reference this parameter, it indicates all variables. In many cases, this parameter can save a lot of code.

Listing 13. LESS files

 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){  -moz-box-shadow: @arguments;  -webkit-box-shadow: @arguments;  box-shadow: @arguments;  }  #header {  .boxShadow(2px,2px,3px,#f36);  }

The compiled CSS file is as follows:

Listing 14. CSS file

 #header {  -moz-box-shadow: 2px 2px 3px #FF36;  -webkit-box-shadow: 2px 2px 3px #FF36;  box-shadow: 2px 2px 3px #FF36;  }

Mixins are one of the most important features of LESS. We have also written many examples here to see if you have such a question: when we have a large number of selectors, in particular, how can we ensure the duplicate names between selectors during collaborative development? If you are a java programmer or C ++ programmer, I guess you will definitely think of Namespaces. LESS also uses the namespace method to avoid the problem of duplicate names, as a result, LESS expands on the basis of mixins. Let's look at the following code:

Listing 15. LESS files

 #mynamespace {  .home {...}  .user {...}  }

In this way, we define a namespace named mynamespace. If we want to reuse the user selector, we only need to use it where the selector needs to be mixed in. # Mynamespace>. user.

Nested rules

When we write standard CSS and encounter Multi-Layer Element nesting, we either use the selector nested definition from the outside to the inside, you can either add a CLASS or ID to a specific element. In LESS, we can write as follows:

Listing 16. HTML snippets

 <div id="home">  <div id="top">top</div>  <div id="center">  <div id="left">left</div>  <div id="right">right</div>  </div>  </div>

Listing 17. LESS files

 #home{    color : blue;    width : 600px;    height : 500px;    border:outset;    #top{         border:outset;         width : 90%;    }    #center{         border:outset;         height : 300px;         width : 90%;         #left{           border:outset;           float : left;   width : 40%;         }         #right{           border:outset;           float : left;   width : 40%;         }     }  }

The compiled CSS file is as follows:

Listing 18. CSS files

 #home {   color: blue;   width: 600px;   height: 500px;   border: outset;  }  #home #top {   border: outset;   width: 90%;  }  #home #center {   border: outset;   height: 300px;   width: 90%;  }  #home #center #left {   border: outset;   float: left;   width: 40%;  }  #home #center #right {   border: outset;   float: left;   width: 40%;  }

From the code above, we can see that the LESS nested rules are written in the corresponding DOM structure in HTML, so that our style sheet writing is more concise and more readable. Meanwhile, nested rules make operations on pseudo elements more convenient.

Listing 19. LESS files

A {color: red; text-decoration: none; &: hover {// If & exists, it parses the same element or pseudo-class of this element, no & Parse is a descendant element color: black; text-decoration: underline ;}}

The compiled CSS file is as follows:

Listing 20. CSS file

 a {  color: red;  text-decoration: none;  }  a:hover {  color: black;  text-decoration: underline;  }

Operations and functions

Our CSS is filled with a large number of numeric values, such as color, padding, and margin. These values are related in some cases, so how can we use LESS to organize the relationship between our values? Let's look at this Code:

Listing 21. LESS files

 @init: #111111;  @transition: @init*2;  .switchColor {  color: @transition;  }

The compiled CSS file is as follows:

Listing 22. CSS file

 .switchColor {   color: #222222;  }

In the above example, the LESS operation is a feature. In short, the addition, subtraction, multiplication, and Division operations are performed on numeric values (numbers, colors, variables, etc. In addition, LESS also provides a set of functions for color operations. The following is the function list for color operations provided by LESS:

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color  darken(@color, 10%); // return a color which is 10% *darker* than @color  saturate(@color, 10%); // return a color 10% *more* saturated than @color  desaturate(@color, 10%);// return a color 10% *less* saturated than @color  fadein(@color, 10%); // return a color 10% *less* transparent than @color  fadeout(@color, 10%); // return a color 10% *more* transparent than @color  spin(@color, 10); // return a color with a 10 degree larger in hue than @color  spin(@color, -10); // return a color with a 10 degree smaller hue than @color

PS: The Code cited from the less css official website, see the http://lesscss.org/#-color-functions for details

Using these functions is the same as using functions in JavaScript.

Listing 23 LESS files

init: #f04615;  #body {   background-color: fadein(@init, 10%);  }

The compiled CSS file is as follows:

Listing 24. CSS file

 #body {   background-color: #f04615;  }

From the above example, we can find that this group of functions is very similar to functions in JavaScript, which can be called and passed parameters. The main function of these functions is to provide the color transformation function. First, the color is converted to the HSL color, and then operated on this basis. LESS also provides a way to obtain the color value, the following is not an example.

The LESS computation and function features are suitable for page component features, such as the progressive inbound and outbound feature during component switching.

Comments)

Proper annotations are necessary to ensure code readability. LESS also supports annotations in two ways: single-line and multi-line annotations, which are the same as the annotation methods in JavaScript, we will not describe it in detail here, but only emphasize that single-line comments (// single-line comments) In LESS cannot be displayed in the compiled CSS, therefore, if your annotations are for style descriptions, use multiline annotations.

LESS VS SASS

Similar frameworks also have SASS: http://sass-lang.com/, compared with LESS, both belong to the CSS Preprocessor, function is similar, are using similar programming language writing CSS, all have the features of variables, ing, nesting, inheritance, etc. The ultimate goal is to facilitate CSS writing and maintenance.

LESS and SASS promote mutual influence. In contrast, LESS is closer to CSS syntax. For more comparisons between the two, refer to this post: https://gist.github.com/674726.

 

 

Conclusion

This article only mentions the basic functions of LESS. More advanced functions such as string interpolation, configuration on the server side, JavaScript expressions, and compilation avoidance can be found at the official website of LESS.

LESS is based on CSS syntax and uses many features that we are familiar with programming languages, which is almost negligible for our developers, it extends more practical functions based on the reserved CSS syntax. LESS provides us with a new method for writing style sheets, we can choose to use some of the LESS features based on our project features. We only need to use a small cost to change the great return. In a word, Less is more, with LESS, you can perform Web development more conveniently.