Recognize less configuration for less and Webstrom

Recognize less configuration for less and Webstrom

Things to do today:

The first thing to do first is to tidy up the usual color ingest

#F1F1F1 the body background color of the Google Settings page

#FFF the background color for Google's content block

The other is to learn the test11 mentioned in the less

One. Jump out of less and sass battles. Online a large pile of each other tear force, it seems that each has spring and autumn Ah! But to my rookie people, I don't care what they gain or lose. I just know that preprocessing is a good idea, and it's kind of.

is to lazy, not just to make CSS more self-help!

In the knowledge that there is a "sea-skin Fly" blogger proposed the following scenario.

1. To do a variety of kernels are compatible with the fillet effect, this CSS effect is a fixed template, and every corner of the use of the same place to copy the same code, then if the fillet one day to change the more round how to do? Is it better to encapsulate these templates at this time?

2. How to use the same kind of red in every place of the website?   To ' #E7253D ... #E7253D ... #E7253D #E7253D ', or ' $red: #E7253D; $red ... $red ... $red '

Haipi

One actually developed blogger gives the idea that less is easy to modularize and invoke.

But even if you do not have to look and know to compile, then for a project is to add additional expenses.

Business:

How to use less to develop it?

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.

From the Know

One. Use less in development mode

Really many people do not advocate the introduction of JS files.

But I have to say it.

1. Build less environment

Introduce script less.js.

<link rel= "stylesheet/less" type= "Text/css" href= "less/styles.less" ><script src= "Js/less.js" type= "text/ JavaScript "></script>

PS: The first line means: less style files
The second line means: The processor is introduced to enable the browser to precompile less to CSS styles.

This was introduced in the less open source address download less.js file.

Less.js can be introduced directly in CDN mode

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

This code also implements the automatic refresh function in the Web text.

A more efficient way is to monitor the less style with the following code, automatically compiled into CSS styles, thus reducing the tedious steps we need to press F5 after we modify the less code to see the actual effect.

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

It is also stated that 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 >   {       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>

Two. Use less in the operating environment

The reviews are all about software koala. But I use Webstrom to knock the code. Is it possible to configure Webstrom to generate the corresponding CSS file for less?

Install Nodejs under WINDOWS10 x64 system and build less environment under Webstorm 2017.1

1, open Nodejs official website http://www.nodejs.org/, point "DOWNLOADS"

2, download the good, double-click "Node-v6.11.2-x64.msi", the default installation path is: C:\Program Files\nodejs. And mine is F:\Program Files (x86) \nodejs

3, "Start"-->cmd, open cmd program, enter "Node-v", appear "v6.11.2"; Enter "Npm-v" and "3.10.10" appears, stating that both Nodejs and NPM have been successfully installed.

4, "Start"-->cmd, open the CMD program, enter "CD F:\Program Files (x86) \nodejs", enter the Nodejs installation directory. Enter NPM Install less-g Enter to install the less component. Wait a moment and when you're done, you'll find the less component in the C:\Users\bond\AppData\Roaming\npm\node_modules directory.

At this point Windows7 x64 system installation Nodejs and configuration less components have been basically completed, next we configure Webstorm 2017.1, so that it can compile less files into a CSS file.

6, File-->settings, open the settings option. Locate the "External Tools" extension tool settings Item, click "+" on the right, enter "less" in the Name field, and "Tool settings" respectively, enter as follows:

F:\Program Files (x86) \nodejs\node.exe

C:\USERS\BOND\APPDATA\ROAMING\NPM\NODE_MODULES\LESS\BIN\LESSC $FilePath $ $FileDir $\ $FileNameWithoutExtension $. Css

F:\Program Files (x86) \nodejs

7, enter "Key" at the top of the settings panel, find the shortcut key set "Keymap", find "External Tools" point on the right, click "Less" and right button, select "Add Keyboard Shortcut", in the appearance of its panel " First Stroke Press the Alt+l key at the same time so that "Alt+l" is set to the shortcut key for compiling the less file into a CSS file.

Finally, the resulting CSS style is as follows:

The less file has been successfully compiled into a CSS file.

2. Recognize the four characteristics of less

Less has four characteristics: variable variables, mixed mixins, nesting, function operations.

Variable variables It is officially meant to allow constant values to be defined like functions, and then called to other places.

It can only define constants with the @ prefix, called. You can also define the @ prefix of a defined variable with the @ prefix. Insert Sass's knowledge casually.

Variables for sass are defined in the $ prefix, and variables can be defined as less.

Such as:

@base0:20px; @base1: @base0 +40px; @global-color:blue;header {background:@global-color; padding:@base1;}

and the resulting CSS style is this:

{ background: Blue; padding: 60px;}

In fact, I think the variable function is actually the basic style of the base style sheet which can replace the native CSS.

The second is to sublimate the grammar that can be computed and cycled. To make it in the true sense of the programming language closer. Variability and increased cycle-up. For the moment, I understand.

One more deep processing.

{ Border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;} Header { background:@global-color; padding:@base1; . Bor-radius (30px);} #div1 { background:pink; . Bor-radius;}

The resulting CSS is like this

{background: Blue; padding: 60px; Border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}  {background: pink; border-radius: 5px; - Webkit-border-radius: 5px; -moz-border-radius: 5px;}

Very well understood for the time being. I understand it as a function of Excel.

The previous example summarizes the use of variable calculation + variable blending (blending can easily introduce a defined class A into another class B, thus simply implementing Class B inherits all the attributes in Class A. ）

Look at the nesting rules again.

#div1 {  background:pink;   . Bor-radius; h1{    font-size:26px;   } span {   font-size:12px;    a{     text-decoration:none;      &:hover{color:yellow;         }     }   }}

It's a mess, it's adjusted. Here is no time for a tune oh.

His CSS generation is like this.

{font-size: 26px;}  {font-size: 12px;}  {text-decoration: none;}  {color: yellow;}

Of course, the code in HTML is easy to understand.

<! DOCTYPE html>

Let's just say, less gives me the feeling that using {} parentheses to embed a nested element like a programming language. The CSS is inherently through > or a space "" to illustrate below is its child elements. The use of less also makes it clear how they relate to each other.

Another thing to say is that there is a variable scope, in fact, the variable can be repeated assignment.

Do not know crossing, have not noticed a problem, is my in. Bor-radius code

{ Border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}

I think this is one of the reasons for using preprocessing! Eliminate many browser-compatible statements directly.

Oh, although it's more than 12, it's also about how to call multiple less files!

Online also gives the method, is the import

For example, a variable @aaa:red is defined inside the a.less, and the b.less file also needs to use the @aaa variable.

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;}

In large, it is when the number of less in a total less through import, and then in the HTML call total less, you can call all the less.

It's almost all of it.

Things to plan for tomorrow:

Continue to be familiar with less precompilation and get to know sass, and understand the differences in their syntax. At the same time to Dava brother pointed out two points test9 in the problem solved. And the senior also gave some hints. Tomorrow we're going to learn the negative impact of pseudo-class focus and Flex layout

It's good for me to shorten my time. Thank you for meeting me in this learning organization.

Recognize less configuration for less and Webstrom