Less simple entry, less entry

Less simple entry, less entry

Official Website address

Http://lesscss.org/

Less Manual

Www.lesscss.net/

Introduction to less on the bootstrap website

Http://www.bootcss.com/p/lesscss/

I. Build a browser Environment

Github: https://github.com/less/less.js

1. js Introduction

Building a Less learning environment is very simple. You only need to use <script type = "text/javascript" src = "less" before the </body> label. js "> </script> can be implemented by introducing a processor.The browser translates less into css styles..

The more effective way is to monitor the less style by using the following code and automatically compile it into the css style. This reduces the tedious steps for us to press F5 after modifying the less code to see the actual effect.

<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script>

Note: Your less style file must be introduced before less. js is introduced.

2. less css style processing

Less inline style and external style

Because we currently use browser-side pre-compilation, Less can be used in inline and external styles.

The Inline style is as follows:

<Style type = "text/less"> // less Code </style>

The external style is introduced as follows:

Note:Note that the rel value is stylesheet/less.

<Link rel = "stylesheet/Less"Type =" text/css "href =" file. less "/>

Ii. Syntax 1. Annotations

// Single-line comment, not as final output/* multi-line comment, with native CSS/* comment... */form as final output */

2. Variables

Variables in Less have the following rules:

Note:Note: directly copying the code on the webpage may cause compilation errors due to some blank characters.

Less source code

@ Color: color; @ dialog :. dialog; @ suffix: fix; // space will be ignored. To retain spaces, use single or double quotation marks @ hi: 'hello'; @ dear: there ;. dialog {// used for the rule property part. The form of background-@ {color }:# 888 must be used as "@ {variable name}". // used for the rule property, you must use the form of "@ {variable name}" @ {color}: blue;} // For selector, you must use the form of "@ {variable name}" @ {dialog} {width: 200px ;}@{ dialog }:: after {content :': @ {hi }@{ dear }! '; // Used for String concatenation. The form of @ {variable name} must be used} @ h: 1000px; // used for selector parts, you must use the form of "@ {variable name. ie-@ {suffix} {@ h: 30px; // The local scope has a higher priority than the global scope. Height: @ h; // used for attribute values. line-height: 30px can be used in either of the two forms.} // 1. use @ as the start identifier of the variable. The variable name consists of letters, numbers, _, and-. // 2. no rules are defined before use; @ dialog-border-color: #666; @ dialog-border-width: 10px; @ dialog-border-width: 1px; // 3. use the final defined value as the final value;

Final output:

.dialog {  background-color: #888;  color: blue;}.dialog {  width: 200px;}.dialog::after {  content: ': hello there!';}.ie-fix {  height: 30px;  line-height: 30px;}

 

Iii. gulp compilation less1. Installation

Global installation: npm install-g less

Install npm install gulp-less -- save-dev in the project

2. Use

Var gulp = require ("gulp"); var less = require ("gulp-less"); gulp. task ("less", function () {gulp. src ('src/css /*. less '). pipe (less ()). pipe (gulp. dest ("src/css");}); // monitors changes in the file gulp. task ("watch", function () {gulp. watch ("src/css /*. less ", ['less ']);});

 

Refer:

Http://www.cnblogs.com/fsjohnhuang/p/4187675.html

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.