Bootstrap customization (2) less basic syntax_html/css_WEB-ITnose

I spent a day looking at less a few days ago. I have been tinkering with other things these days, and the project is also in progress. Today I will spend some time sorting out the basic syntax of less, and also share the actual practice. Some of my experiences are shared with everyone.

In this article, the author starts with the basic syntax of less, and uses the logical structure of bootstrap to sort out the syntax of less, so as to facilitate rapid development in the future.

1. Variables

Similar to many background editing syntaxes, less also has its own variables, but the variables in less are more precise It is a constant, and its value never changes once it is assigned.

@font-size：14px;

p{font-size:@font-size}

-->p{font-size:14px}

As mentioned before, the variables.less file of the bootstrap source code defines all variables, and the less files corresponding to other components use the variables defined by them, and they are managed uniformly.

variables.less is as shown below. If we want to simply customize bootstrap, just modify a few variable definitions.

2. Comments

Less comments are the same as many backend languages.

Line comments: //xxxx

Block comments: /*xxxx

                                                                       >

@import "xxx";

@import syntax imports other files, such as defined variables, bootstrap takes full advantage of this, let's take a look at bootstrap.less Source code.

As mentioned before, the bootstrap file introduces all the less files, and finally compiles this file directly.

Looking at the source code, you can see that the first reference is variables.less, which is the definition of all variables.

Secondly, mixins.less is introduced, and mixins.less imports all the mixing function definitions, which are used in the later component less.

This is equivalent to backend languages ​​such as c# first importing class libraries.

4. Mix

.border{

border:1px solid solid;

}

.header{

height:200px;

.border;

}

-->.header{

border:1px solid solid;

height:200px;

}

The best thing about blending is that you don’t have to write it over and over again It is a repeated style and can be quoted at will.

5. Nesting

.header{

　xxx;

　.header-body{ &:hover {

　xxx3;

　}

}

-->

.header{xxx}

.header .header-body{xxx1}

.header .header-footer{xxx2}

.header:hover{xxx3}

Smart people can probably figure it out' The role of &' is right? & represents the parent selector, which is equivalent to the .parent() method in jquery.

Nesting can be found everywhere in bootstrap, below is an example of .btn button style.

5. Media Inquiries

Bootstrap is very successful in large part because of its Response support, which is inseparable from media queries.

@media(min-width>768px){

ssss;

}

@ media(min-width>970px){

ssss;

}

grid.less responds to different mixing properties of different screens.

As shown in the picture below.

6. Function

Like all programming languages, less also has its own function library.

For example:

darken(@color,@amout)//Reduce the color brightness by a certain value

Parameters:

@color: A color object (A color object)

@amount: Percentage 0-100%

Return value: Color (color)

For example Bootstrap's default link hover style reduces the brightness by 15%.

As shown in the picture.

7. Operations

Any numerical value, color and variable can be operated. Here are a pair of examples:

@base: 5%;

@filler: @base * 2;//Multiplication

@other: @base @filler;// Addition

color: #888 / 4;//Division

background-color: @base-color #111;

height: 100% / 2 @filler;/ /Comprehensive operation

Another feature of less operation is that it can automatically calculate the unit. This is a feature that many backend programming languages ​​do not have and is worthy of praise.

@var: 1px 5;

In this example Less will use this unit in the final output - 6px

One of the bootstrap A typical application is that the width of various screen terminal devices is equal to the defined width grid flow width, and this grid flow width will be used as the left and right padding.

8. Namespace

#bundle {

　.button {

　display: block; border: 1px solid black; background-color : gray; &:hover { background-color: white }

　}

　 .tab { ... }

　 .citation { ... }

}

Now we want to mix in the .button class in #header a.

Have some students thought of mixing as mentioned before, but this involves a namespace issue, which is the same as the method in language libraries such as c#. The same method may be defined in the two class libraries , this time it is necessary to distinguish through namespace, which is a bit like java packaging.

Okay, this is how we should use it at this time.

#header a {

color: orange;

#bundle > .button;

}

9. Scope

This is equivalent to the member variables and local variables in languages ​​​​such as c#. Those who are familiar with such languages ​​​​can skip this knowledge point.

@var: red;

#page {

@var: white;

#header {

; // At this time, the color attribute of #header is white

　　}

}

commonly used in bootstrap is about 1--7 points , the last two points are a bit tasteless.

Of course these 9 points are only the most basic syntax of less. If you want to use these to customize a better bootstrap theme, it is not enough, but simple basic modifications can still be done easily.

It’s a bit hard to exercise at night, the weather is very hot, and I’m a little tired after staying up until this point, so some examples use official examples, sorry.

I wish everyone a happy play and happy learning.

The next article will explain the more advanced syntax of less, so stay tuned

Please indicate the source when reprinting this article