Less CSS use, CSS can also play with JS

This article turns from http://blog.csdn.net/xuyonghong1122/article/details/51986472

There's always this idea when using CSS.

• This property value is always repetitive and annoying.

• This property value I wrote in the previous CSS file, so I would like to take it directly.

• Can CSS use a variable like any other programming language instead of something that needs to be reused?

In view of the above idea is not my one will think, as long as the front-end will certainly think of this problem, but the CSS basically can be said that no syntax to follow, so there is less framework

What is CSS?

As a markup language, CSS syntax is relatively simple, the user's requirements are low, but also bring some problems: CSS needs to write a lot of seemingly illogical code, inconvenient maintenance and expansion, not conducive to reuse, especially for non-front-end development engineers, often because of the lack of CSS Writing experience and difficult to write well-organized and easy-to-maintain CSS code, the cause of these difficulties is because CSS is a non-procedural language, no variables, functions, scope (scope) and other concepts

What is less?

It is based on the syntax of CSS, the introduction of variables, Mixin (mixed), arithmetic and function functions, greatly simplifies the writing of CSS, and reduces the maintenance cost of CSS, as its name says, less allows us to do more things with fewer code.

The principle of less

In essence, less contains a set of custom grammars and a parser that defines their own style rules based on these syntaxes, which eventually generate the corresponding CSS file through the parser. Less does not cut the original CSS features, not to replace the CSS, but on the basis of the existing CSS syntax, for the CSS to add programming language features.

Environment configuration

• Take Webstorm as an example, you must install the following environment before you start using less
• node. js
• node. js command Line Input "NPM install-g less" installs less;
• Open Webstorm,file→settings→tools→file watchers, click on the right green "+" sign

• And of course there's a way to use less is HBuilder to use the editor directly, with the less plugin

  Start using

  This example is written in Hbuilder, and will automatically help us generate CSS files when we write the less file.

• <! DOCTYPE html>
  　　
  Our CSS files are automatically generated without any changes, we just need to modify our less file to
  ON less!!!!

• @index-color:red;. index-home{    Box-sizing:content-box;    Background-color: @index-color;  }

  When we're done, let's take a look at Index.css generated code

• Yes, the background color turns red, so let's see how it works.
  

  Yes, that's so, if you think this article is over, then it's wrong, it only satisfies the current page reference to the variables in the current less file, how to reference other variables?
  Less files can refer to other less files, played Java know, reference a class will use what keyword, yes, import everyone ready to get on the bus!!!!

  Now I want to refer to a base class less file in the Index.less file, how do I write it?
  First Write Base-less.less
  

• 　　

  Write a base-font-color:white in the Base-less file to control the text color to white
  Referenced in Index.less, as follows

  
  It's simple and straightforward, and we'll see how it works.
  

  See here, some people will ask, can you direct reference to the less file ah? Yes, of course.

  We can use the. Less source file directly on the client, just download the less.js file from http://lesscss.org and add the following code to the HTML we need to introduce the less source file:

  Less source files are introduced in the same way that standard CSS files are introduced:

• <link rel= "stylesheet/less" type= "Text/css" href= "index.less" ><link rel= "stylesheet/less" type= "Text/css" href= "Index.less" >

  In fact, less is the life cycle of their own, oh, sorry, is the scope ...
  Simply speaking is the concept of local variables or global variables, the order of finding variables is first found in the local definition, if not found, then find the ancestor definition, until the global.
  Simple and straightforward, code example:

• @width: 20px;  . index{    @width: 30px;    . centerdiv{        width: @width;//This should take the value of the recently defined variable width 30px               }  }  . leftdiv {      width: @width;//This should take the most defined Value of variable width 20px  }

  Finally to the end, and finally is less the most powerful one of the role, you can take less as JS to play

• @import "base-less.less"; @index-color:red;. index-home {    box-sizing:content-box;    Background-color: @index-color;    Color: @base-font-color;    . MarginTop (100px); }.margintop (@distance) {    margin-top: @distance;}

  　　

  The function can be called directly to complete the assignment of some properties to see how the effect

  See here, the basic introduction is over, less is really convenient, in addition if you are an Android developer, this person you must pay attention to, his blog is dry ———-He is nohttp Author: Zhangjie Blog Address

Less CSS use, CSS can also play with JS