CSS front-end advanced Path: First

1. Official Introduction

Less is a CSS preprocessing language, it expands the CSS language, add such functions as variable, mixed (mixin), function, make CSS easier to maintain, easy to create themes, expand. Less can run on Node or browser side.

Back to Top

2. Self-understanding

Less is a dynamic CSS language that makes CSS styles more flexible for use in HTML tags. Imagine if not less, we have to do some logical calculation of the style can only rely on JS to achieve, with less, you can easily dynamically set the HTML tag style. For example, one of the most common requirements, when the current browser width is less than 500px, to a certain div set a style, using LESS+CSS3 can be very simple to solve the problem. Of course, this is just one of the scenarios where there are some common conditions and logical judgments that can be made in less. In general, less gives the ability to logically compute the CSS.

In addition, the dynamic CSS syntax has an important role in improving the maintainability of style code. For example, one of the simplest, we can define a global color variable @aaa: #222, the system all the default color with the @aaa to write, this time if you need to modify the global color, we just need to change the value of the @aaa variable is good, other places do not have to make any changes, this, It should be easy to understand as a programmer.

Say 1000 10,000, practice is the king, following the blogger together to see some less basic usage bar.

Back to Top

3, less, Sass, Stylus

When it comes to less, there may be people who are not, and maybe someone will say: less outdated, sass is the trend, you see BOOTSTRAP3 use less, how BOOTSTRAP4 instead of sass and so on. Bloggers think, the three of them as a CSS preprocessing technology, certainly have their own advantages. Today do not want to discuss the advantages and disadvantages of the three, first to learn less, so much to do!

Back to Top

Ii. Getting started with less

About less's introductory tutorial, the online is also a search a lot of, basic and less Chinese on the web surface almost. Less can run either on the node server or in the browser client. Bloggers are not familiar with node, so this article or look at its use in the browser, in fact, no matter where to use, its basic usage is the same.

In general, client run less is divided into two scenarios:

The first way is to refer to the. less file directly on the HTML page, and then use Less.js to compile the less file to dynamically generate CSS styles that exist on the current page, which is suitable for development mode.

The second way is that we first write the syntax of the. less file, and then use the tool to generate the corresponding. css file, and then the client directly references the. css file. For example, our common bootstrap.css is compiled from tools, which is more suitable for running environments.

Back to Top

1. Use less under development mode

(1) First we create a less file under the project named Less.less, which writes the simplest syntax

@base: #f938ab;d iv{    background-color: @base;    padding:50px;}

(2) Then refer to the less file in the HTML page head

<link rel= "stylesheet/less" type= "Text/css" href= "~/content/less.less"/>

(3) Go to less open source address to download the Less.js file, and then introduce the file.

<script src= "Less.js" type= "Text/javascript" ></script>

Or if you do not want to download the Less.js file, you can also directly use the CDN way to reference the Less.js, Bo is the owner of this.

<script src= "//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js" ></script>

It is important to note that the role of Less.js is to compile the less.less file, making it a CSS style that the browser can read.

(4) before referencing less.js, a less variable is required to declare the environment parameter of less, so the final reference file is as follows:

<link rel= "stylesheet/less" type= "Text/css" href= "~/content/less.less"/>    <script type= "text/ JavaScript "> Less    = {        env:" Development ",        Async:false,        fileasync:false,        poll:1000,        Functions: {},        Dumplinenumbers: "Comments",        Relativeurls:false,        rootpath: ":/a.com/"    };    </script>    <script src= "//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js" ></script >

It is important to emphasize that the declaration of the less variable must precede the Less.js reference.

(5) Commissioning and operation

We run the project directly and get the following results

If your debugging environment is not visual Studio, you won't have this problem! For these issues, you need to configure the following nodes in Web. config

<system.webServer>  <staticContent>    <mimemap fileextension= ". Less" mimetype= "text/css"/ >  </staticcontent ></system.webServer>

And then run it again, and you can see that the compiled CSS is generated as follows

2. Use less in the operating mode

If it is a running environment, it is best to compile less.less into a. css file, and then directly reference the generated. css file, bloggers are not familiar with node's environment, here, Bo Master introduced a less generated CSS tool: Koala. First go to the official website to download the installation files, after the installation run to get the following interface:

Then drag the less directory to the middle of the interface

Click the Compile button. A less.css file will be generated in Less.less's sibling directory

You can then refer to this CSS file directly. It's not very easy~~ with the tools.

Back to Top

Iii. Common usage examples

First of all, let's start with the basics!

Back to Top

1. Start with the first less variable

@base: #f938ab;d iv{    background-color: @base;    padding:50px;}

Page HTML code:

<body>    <div>        first less style    </div></body>

The following CSS styles are compiled:

Effect preview:

The above is a most basic less variable, which defines a global @base variable in the. not file, which can be called anywhere in the file.

It is necessary to note that (1) the variables in less are the starting identity of the variable with @, the variable name is composed of letters, numbers, _ and-(2) The difference between the global variable and the local variable exists in the same name as defined in a file (described later);

Back to Top

2. Variable calculation

@nice-blue: #f938ab; @light-blue: @nice-blue + #333;d IV {  background-color: @light-blue;}

Compile to get the result:

div {  background-color: #ff6bde;}

This shows that in less, variables can be calculated dynamically.

3. Variable mixing

Blending can easily introduce a well-defined class A into another class B, thus simply implementing Class B inherits all the attributes in Class A. We can also call them with parameters, just as with a function. Let's take a look at the following example:

. Rounded-corners (@radius: 15px) {  Border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;} #div1 {    padding:20px;    width:200px;    height:100px;    border:2px solid red;  . Rounded-corners;} #div2 {    padding:20px;    width:200px;    height:100px;    border:2px solid green;  . Rounded-corners (30px);}

Have you guessed the result of the compilation:

#div1 {  padding:20px;  width:200px;  height:100px;  border:2px solid red;  border-radius:15px;  -webkit-border-radius:15px;  -moz-border-radius:15px;} #div2 {  padding:20px;  width:200px;  height:100px;  border:2px solid Green;  border-radius:30px;  -webkit-border-radius:30px;  -moz-border-radius:30px;}

Principle Analysis: The top @radius variable can be understood as a method parameter, and then "15px" can be understood as the default value of the parameter. First we define a dynamic style. Rounded-corners, this style has a dynamic parameter @radius, the default value of this parameter is "15px". If we do not pass parameters when we call, then @radius is equal to 15px, if we pass 30px, then @radius is the parameter value we pass. If this understanding is better, is it a bit like the concept of "method" in our programming? If the principle of object-oriented is also well understood, #div1和 #div2 inheritance. Rounded-corners This style, so you can use it directly, and then if "subclass" (#div2) has a different property than the "parent class", it can be "overridden" and is not the same.

Now that we've done the test, let's take a look at the test results:

  <div id= "Div1" >div1</div>    <div id= "Div2" >div2</div>

4. Nesting rules

In CSS, we can often see the label style nesting, so how does it come into being in less? Let's get down below the less code

#div1 {    h1 {        font-size:26px;        Font-weight:bold;    }    span {        font-size:12px;        a {            text-decoration:none;            &:hover {                border-width:1px;}}}    

Post-compilation CSS:

#div1 H1 {  font-size:26px;  Font-weight:bold;} #div1 span {  font-size:12px;} #div1 span a {  text-decoration:none;} #div1 span a:hover {  border-width:1px;}

The benefits of less are obvious, the label hierarchy is clearly visible, and the amount of CSS code can be reduced. But bloggers suspect that some people will not be used to this type of writing, because this structure level deep, so in reading it will be someone not accustomed to, no matter how, and cherish it.

5, the use of functions

The concept of function is relatively easy to understand in less. For example, we have this definition:

. Mixin (Dark, @color) {  Color:darken (@color, 10%);}. Mixin (light, @color) {  Color:lighten (@color, 10%);}. Mixin (@_, @color) {  display:block;}

And then there's this one called

@switch: Light;. class {  . mixin (@switch, #888);  }

Compiled to get

. class {  color: #a2a2a2;  Display:block;}

The above is not difficult to understand, is a simple logical judgment.

Back to Top

6. Condition Judgment

In the "Use of functions" above, we see that less supports the "equals" of the matching method, in addition, less also support greater than, smaller than the condition of the judgment of the grammar, the so-called "guidance mix." Let's take a look at its syntax:

First, define the "method" of several conditional judgments.

. Mixin (@a) when (Lightness (@a) >= 50%) {  background-color:black;}. Mixin (@a) when (Lightness (@a) < 50%) {  background-color:white;}. Mixin (@a) {  color: @a;}

Then call the "method"

. Class1 {. mixin (#ddd)}.class2 {. Mixin (#555)}

What do you think the result is? The compilation results are as follows:

. class1 {  background-color:black;  Color: #ddd;}. Class2 {  background-color:white;  Color: #555;}

Principle Analysis: I do not know if you have guessed the results, anyway, the first blogger is wrong to guess. When the syntax is not difficult to understand, is a condition to judge, the key is the following color from where to come. Originally in less is a mix of calls, that is, if the definition of three function mixin, respectively corresponding to three different conditions, then we call the Mixin function if three conditions are satisfied, then it will be three results. This is why we class1 and Class2 get the results as above. All operators in less are: >, >=, =, =<, <, except for these 5 operators, less also provides methods for judging based on value types: IsColor (), Isnumber (), isstring (), Iskeyword (), Isurl () and so on. Use the following:

. Mixin (@a, @b:0) when (Isnumber (@b)) {...}. Mixin (@a, @b:black) when (IsColor (@b)) {...}

In addition to the above-mentioned conditional expressions, less also provides logical expressions such as and, not. Basic usage such as:

. Mixin (@b) when not (@b > 0) {       background-color:blue;}

7. Variable Scope

The scope of less is well understood, which is what we often call the difference between global variables and local variables, and remember that variable names can be duplicated in less.

@aaa: red; #div1 {  @aaa: green;  #header {    color: @aaa;   }} #div2 {  color: @aaa;   }

I'm sure you've guessed the result. After compilation

#div1 #header {  color:green;} #div2 {  color:red;}

8, have to say the import command

Less uses import to introduce the external to the local no file. For example a.less inside defines a variable @aaa:red, and b.less file inside also need to use @aaa this variable, this time how to do? The import comes in handy.

A.less content is as follows:

@aaa: Red;

B.less content is as follows:

@import ' a.less ';d iv{    color: @aaa;}

Then the HTML page to introduce the B.less file, the compilation can finally get the following results

div{    color: @aaa;}

One might say that it's no use to refer to variables in other less files. But you think about not, because the project inside a lot of modules, each module has its own less file, if there is no import, how to unified scheduling it. This from bootstrap can be seen, when we download BOOTSTRAP3 source code, you will find that there are a lot of less files, in the less folder, these less files corresponding to the style of each module. Shaped like

After the styles of each module have been written, there will be a bootstrap.less file that will import all other less files, with the following contents:

Core variables and Mixins@import "variables.less"; @import "mixins.less";//Reset and Dependencies@import " Normalize.less ", @import" print.less ", @import" glyphicons.less ";//Core Css@import" scaffolding.less "; @import" Type.less ", @import" code.less ", @import" grid.less ", @import" tables.less "; @import" forms.less "; @import" buttons.less ";//Components@import" component-animations.less "; @import" dropdowns.less "; @import" button-groups.less "; @import" Input-groups.less ", @import" navs.less ", @import" navbar.less ", @import" breadcrumbs.less "; @import" pagination.less "; @import "Pager.less", @import "labels.less", @import "badges.less", @import "jumbotron.less"; @import "Thumbnails.less" , @import "alerts.less", @import "progress-bars.less", @import "media.less", @import "list-group.less"; @import " Panels.less ", @import" responsive-embed.less ", @import" wells.less ", @import" close.less ";//Components w/ Javascript@import "Modals.less", @import "tooltip.less", @import "popovers.less"; @import "carousel.less";//UtiliTy Classes@import "utilities.less"; @import "responsive-utilities.less"; 

Then we compile the bootstrap.less and we can bring in the less files of all the modules.

To prove this, let's test a piece and add the following to the a.less:

@aaa: Red; @widthtest: 200px;. class2{    Background-color:green;    border:5px solid Red;}

B.less content is as follows:

@import ' a.less ';d iv{    color: @aaa;    Width: @widthtest;    height:50px;}

Then compile b.less to get the contents of the B.css file as follows:

. class2 {  background-color:green;  border:5px solid Red;} div {  color: #ff0000;  width:200px;  height:50px;}

In addition, the import directive contains several parameter types:

1. @import (Reference) "File path"; The introduced file is used as a style library, so the styles in the file are not compiled directly into CSS style rules. The current style file references the contents of the style library through extend and mixins.

2. @import (inline) "File path"; For introducing less incompatible CSS files, the inline configuration tells the compiler not to compile the incoming files and output them directly to the final output.

3. @import (less) "File path"; This configuration entry is used by default to indicate that the file being introduced is less.

4. @import (CSS) "File path"; Indicates that the current operation is a @import operation in a CSS. The current file will output a style file, and the imported file itself is a separate style file

5. @import (once) "File path"; This configuration item is used by default to indicate that the same resource is only introduced once.

6. @import (multiple) "File path"; Indicates that the same resource can be introduced multiple times.

Back to Top

9. Comprehensive example

For the above mentioned screen changes when the dynamic to set the style of the problem, using less combined with CSS3 @media can be easily handled, such as the following section less code:

@base: #f938ab;d iv{    background-color: @base;    padding:50px;}. Divcolor {  @media (max-width:400px) {    background-color:green;  }  @media (min-width:400px) and (max-width:800px) {    background-color:red;  }  @media (min-width:800px) {    background-color: #f938ab;  }}

The interface HTML is as follows:

<body>    <div id= "Div1" class= "Divcolor" >div1</div>    <div id= "Div2" >div2</div ></body>

Using this nested notation allows you to implement a preset style for multiple conditions, so the resulting CSS is as follows:

/* Line 4, http://localhost:34512/Content/less.less */div {  background-color: #f938ab;  padding:50px;} @media (max-width:400px) {  . divcolor {    background-color:green;  }} @media (min-width:400px) and (max-width:800px) {  . divcolor {    background-color:red;  }} @media (min-width:800px) {  . divcolor {    background-color: #f938ab;  }}

Indicates that the background color is green when the width of the current document is less than 400, and that it is red when it is greater than 400 or less than 800, and about 800 when the background color is #f938ab. Let's see if this is the case:

This is just a simple test, and it's certainly not possible to just set a simple background color in real-world applications. This is a lot to do with responsive layout scenarios.

For conditional judgment, less supports nested notation, such as:

@base: #f938ab;d iv{    background-color: @base;    padding:50px;}. class1{    width:550px;    margin:10px;}. class2{    width:150px;    Margin:auto;    Display:block;}. Divcolor {  @media (max-width:800px) {     background-color:green;     . Class1;     @media (min-width:400px) {        background-color:red;        . Class2     }}}  

Compile the resulting CSS as follows:

div {  background-color: #f938ab;  padding:50px;}. Class1 {  width:550px;  margin:10px;}. Class2 {  width:150px;  Margin:auto;  Display:block;} @media (max-width:800px) {  . divcolor {    background-color:green;    width:550px;    margin:10px;}  } @media (max-width:800px) and (min-width:400px) {  . divcolor {    background-color:red;    width:150px;    Margin:auto;    Display:block;}  }

