What is the relationship between bootstrap and less?

In bootstrap, many threaded style components are provided. These styles are written by less. You do not need to know less to use bootstrap. Less includes a set of custom syntax and a parser to generate corresponding css files. .

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What is the relationship between bootstrap and less

In bootstrap, many threaded style components are provided. These styles are written by less. You do not need to know less to use bootstrap.

bootstrap project architecture

Implementing layout system and content

1) Design of grid system Supplementary content: column sorting col-md-push- 4

2) Complete the content of the cell

Style customization

• less

• Modify bootstrap source Code

less

#css is a markup language with simple syntax and low learning difficulty. However, CSS requires writing a large amount of seemingly illogical code and is inconvenient to maintain. And expansion is not conducive to reuse. A big reason for these difficulties is that CSS is a non-programmed language and has no concepts such as variables, functions, and SCOPE (scope).

LESS includes a set of custom grammars and a parser. Users define their own style rules based on these grammars. These rules will eventually be compiled by the parser to generate corresponding CSS files.

LESS does not cut out the original features of CSS, nor is it used to replace CSS. Instead, it adds procedural language features to CSS based on the existing CSS syntax. Less is based on the syntax of CSS and introduces functions such as variables, Mixin (mixing), operations and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS.

Less can run On Node or browser side.

Method 1 - Run the less conversion program on the client

 Introduce xx.less into html, and then introduce less.js, which is a less that can run in the client browser Compiler program -- low efficiency, not recommended. Method 2 - run less conversion program on the server side - recommended

1) Download and install a server-side js interpreter-nodejs

2) Download the lessc file conversion program lessc --js script

3) Run the lessc converter on the server-side js interpreter to convert the .less file you wrote into a css file

a) You can use the conversion program in the command line

    node.exe lessc my.less my.css

b) Use the conversion program in hbuilder

4) In the html file, reference the compiled css file

2. Less syntax learning

less fully supports css syntax

lss supports single-line comments and multi-line comments, but only multi-line comments will be converted to css files

less supports variables (variable)

ˆ @variable name: value

ˆ Use: selector {style: @variable name}

less supports style mixing-in one Another style is referenced in the style

 .class1(){...}
 .class2{
     ...
     .class1
     ...
 }

Mixed with parameters

 .class()(@参数1，@参数2，。。。){....}
 .class2 {
     ...
     .class(参数1，参数2);
     ...
 }

Nested rules

 .class1{
    ...
   .class2 {}
 }

The result of conversion

 .class1{  }
 .class1 .class2{ }

less can be performed on variables and constants Arithmetic operations

less provides dozens of application functions for styles

lighten(color, brightness value): Brighten the specified color by the specified percentage

darken(color , brightness value): darken the specified color by the specified percentage

floor(number) log value rounded down

ceil(number) log value rounded up

Page import

Try to avoid using the @import directive in the css file - it will increase the number of HTTP requests

In order to split a style file into multiple small style files, multiple people can use it at the same time When writing, you can use @import-less in less to import other less files. During conversion, a large and complete css style file will be spliced, so it is recommended to import other less files in less

<code> @import "xx.less"</code>

**Large projects Medium less file structure**

variable.less - place all variables

mixin.less - place all mixin

reset.less - place HTML elements Reset style

navbar.less - Navigation bar related

footer.less - Footer related style

js.less - A lot of less files

3. Achieve style customization by modifying the less source file of bootstrap

Delete unnecessary styles, such as carousel ads/modal boxes

In the bootstrap.less file, comment Just remove the unnecessary @import

Customize the default style of the required components, such as modifying the default background color of the navigation bar

 Just modify the variables in the variables.less file

Create a new style based on the default style provided by bootstrap, such as customizing the style of the divider in dropdown - in-depth customization of components

 Modify the less file corresponding to a component

Related recommendations: bootstrap tutorial

The above is the detailed content of What is the relationship between bootstrap and less?. For more information, please follow other related articles on the PHP Chinese website!