Understand the less configuration and lesswebstrom configuration of less and webstrom.

Understand the less configuration and lesswebstrom configuration of less and webstrom.

Understanding the less configuration of less and webstrom

 

Things completed today:

 

The first thing is to sort out the commonly used color uptake.

# F1F1F1 google's settings page body background color

# FFF is the background color of google's content Block

 

The other is to learn the less mentioned in test11.

I. Jump out of the less and sass battles. A lot of online force-breaking, it seems that each has its own spring and autumn! But they told me that I don't care about their gains and losses. I only know that preprocessing is a good idea.

They are all for laziness. Isn't it necessary to make css more self-built!

 

On zhihu, a blogger of haipifei proposed the following scenarios.

1. to achieve the rounded corner effect compatible with various kernels, the CSS effect has a fixed template. If the same code is copied to every place where the rounded corner is used, what if the rounded corner is changed to a circle one day? Can these templates be encapsulated at this time?

2. What should I do if I use the same red color in every part of the website? Yes '# E7253D... # E7253D... # E7253D... # E7253D ', or' $ red: # E7253D; $ red... $ red... $ red'

Author: Hai pifei

A Practical developer gives the opinion that less can facilitate modularization and calling.

But even if you don't need to check it, you know that you want to compile it. This will increase the extra cost for a project.

Question:

 

How to use less development?

The client runs Less in two situations:

The first method is to reference the. less file directly on the html page, and then use less. js to compile the less file to dynamically generate the css style and exist on the current page. This method is applicable to the development mode.

The hosts file. For example, bootstrap.css is compiled by tools, which is more suitable for running environments.

 

Ji zhihu

 

I. Use Less in Development Mode

Many people do not advocate the introduction of js files.

But let's talk about it.

1. Build a less Environment

Introduce the 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 indicates the less style file.
The second line means: Introduce the processor to implement the browser to translate less pre-compiled into css styles.

This is introduced by downloading the less. js file from the less open source address.

You can directly introduce less. js in CDN Mode

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

This type of code is also available in the net text for automatic refresh.

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="js/less.js"></script><script>less.watch();</script>

Some people also note that before referencing less. js, a less variable is required to declare and compile the less environment parameters. Therefore, all the reference files are 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>

II. Less

The software Koala is introduced in the comments. However, I use webstrom for coding. So can we configure webstrom to generate the corresponding css file in less mode?

Install Nodejs in Windows 10 x64 system and build a compilation LESS environment in WebStorm 2017.1

1. Open the official Nodejs website http://www.nodejs.org/and click "downloads"

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

3. "Start" --> cmd, open the cmd program, enter "node-v", and "v6.11.2" appears. Enter "npm-v", and "3.10.10" appears ", it indicates that Nodejs and npm have been installed successfully.

4. "Start" --> cmd, open the cmd Program, enter "cd F: \ Program Files (x86) \ nodejs", and enter the nodejs installation directory. Enter npm install less-g and press enter to install the less component. Wait a moment. After that, you will find the less component in the C: \ Users \ bond \ AppData \ Roaming \ npm \ node_modules directory.

Now Nodejs has been installed in Windows 7 x64 System and the less component has been configured. Next we will configure WebStorm 2017.1 to compile the less file into a css file.

 

6. File --> Settings. Enable the Settings option. Find the "External Tools" extension Tool settings, click "+" on the right, enter "LESS" in the Name column, and enter "Tool settings" 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 setting item "Keymap", find "External Tools" on the right, click "LESS", and right-click, select "Add Keyboard Shortcut cut" and press the "Alt + L" key at the "First Stroke" on the displayed panel, in this way, "Alt + L" is set as the shortcut key for compiling less files into css files.

 

The generated css style is as follows:

So far, the less file has been compiled into a css file.

 

2. Understand four features of less

LESS has four features: Variable variables, mixed mixins, nesting, and function operations.

Variable variables, which officially means allowing a constant value to be defined as a function and then called elsewhere.

It can be called only by defining a constant with the @ prefix. You can also use the @ prefix to define the @ prefix of a variable. Insert the sass knowledge as needed.

For sass variables, constants are defined with the $ prefix, and variables of variables can be defined in the same way as those of less.

For example:

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

The generated css style is as follows:

header { background: blue; padding: 60px;}

In fact, I think the variable function can actually replace the basic style function of the base style table of the native css.

The second is to sublimate to the syntax that can be computed and cyclic. Bring it closer to the programming language in the true sense. Increased variability and reusability. This is what we understand for the time being.

Another deep processing

@base0:20px;@base1:@base0+40px;@global-color:blue;.bor-radius (@radius: 5px) { 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 generated css is like this.

header {background: blue; padding: 60px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}#div1 {background: pink; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}

It is easy to understand. I understand it as a function in excel.

In the previous example, we used variable calculation + variable mixing (hybrid can easily introduce A defined class A to another class B, so that class B can inherit all the attributes in class .)

Next, let's look at the nested rules.

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

It is out of structure, and this is adjusted. There is no time for one of the following adjustments.

His css generation is like this.

#div1 h1 {font-size: 26px;}#div1 span {font-size: 12px;}#div1 span a {text-decoration: none;}#div1 span a:hover {color: yellow;}

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

<!DOCTYPE html>
To put it this way, less gives me the feeling that using {} parentheses is like a programming language to nest child elements. Css indicates that its sub-elements are below by> or space. Using less can also clearly understand the relationship between them.
There is also a variable scope statement, which means that variables can be assigned repeatedly.
I don't know whether I noticed a problem, that is, my code in. bor-radius
.bor-radius (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}
I think this is also one of the reasons for using preprocessing! Saves many browser-compatible statements.
 
Oh, although it's over 12 o'clock, we need to talk about how to call multiple less files!
The method is also provided on the Internet, that is, import
For example, A variable @ aaa: red is defined in A. less, and the variable @ aaa must be used in the B. less file.
A. less content is as follows:
@aaa:red;
B. less:
@import 'A.less';div{color:@aaa;}
Then introduce the B. less file to the html page and compile the file. The following result is displayed:
div{color:@aaa;}
To put it bluntly, when multiple less items are introduced through import in a total less, and then the total less is called in html, all the less items can be called.
It's almost the same.
 
Things planned for tomorrow:
Continue to familiarize yourself with less pre-compilation, sass, and their syntax differences. At the same time, we need to solve the problems mentioned in test9 by Senior Brother Eva. And the senior brother gave some tips. Tomorrow we will learn about the negative effects of pseudo-class focus and flex layout.
This can shorten the time. Thank you for meeting this learning institution.