10-minute entry less (translated from: Learn less in Minutes (or less))

10-minute entry less (translated from: Learn less in Minutes (or less))

Note: This article is translated article, because the translation level is limited, inevitably has the omission insufficiency, may view the original text.

We know that writing CSS code is very boring, especially to write repeating color, style code, which requires a lot of effort to keep the CSS code maintainable, but it should not be like this.

Fortunately, the Web development community has solved this problem, and we now have pre-processors like less, sass and stylus. They have a lot better than normal CSS, as shown here:

• Variables---so that we can define and easily change values in the style sheet.
• Dynamically calculated values. We have calc in CSS.
• Mixins---allows us to reuse and combine styles. It even supports passing parameters.
• function---It gives us a lot of convenient functions to manipulate colors, convert pictures and so on.

The disadvantage is that if you use one of their precompiled compilers, you need to compile it into a regular CSS so that he can work in your browser.

The first part: Getting Started

Less it requires node. js or a Web browser to run. You can also reference Less.js at your site so that it compiles all the. Less style sheets in real time, but this is very slow and we don't recommend them. The recommended way is to pre-compile your less style sheet into a. css file to use. There are a lot of free places that can help you compile less files, but in this article I'll use node. js.

If you have node installed and you know what the terminal is, open it and install it using NPM:

NPM Install-g Less

This will allow your less file to be compiled into a CSS file like this:

LESSC style.less > Style.css

With this line of code, our code will be converted to a normal CSS file with Styles.css.

Part II: Variables

One of the main features of less is the ability to create variables, like a standard programming language, that can store any type of variable, such as: color, selector, size, font name, and so on. The idea of less is to make CSS possible with programming syntax.

Now we've defined a variable, a background color, and a font color, all of which contain 16 binary codes. Observe the following two versions:

Less is shown below:

@background-color: #ffffff; @text-color: #1A237E;p {  background-color: @background-color;  Color: @text-color;  padding:15px;} ul{  background-color: @background-color;} li{  color: @text-color;}

Post-compilation CSS is as follows:

p {  background-color: #ffffff;  Color: #1a237e;  padding:15px;} UL {  background-color: #ffffff;} Li {  color: #1a237e;}

In the example above, the background color is white and the font is black. If we want to change all the colors, we can easily change the values of the variables without having to manually modify each place.

Part III: Mixins

Less may be that we use an existing class or ID reference to other selectors, as in the following example:

Less files:

#circle {  background-color: #4CAF50;  border-radius:100%;} #small-circle{  width:50px;  height:50px;  #circle} #big-circle{  width:100px;  height:100px;  #circle}

CSS file:

#circle {  background-color: #4CAF50;  border-radius:100%;} #small-circle {  width:50px;  height:50px;  Background-color: #4CAF50;  border-radius:100%;} #big-circle {  width:100px;  height:100px;  Background-color: #4CAF50;  border-radius:100%;}

Another very cool thing is that mixins can receive variables, in the following example we add a parameter to width and height in circles, and have a default value of 25px. The following code will create a small circle of 25x25 and a 100x100.

Less files:

#circle (@size: 25px) {  background-color: #4CAF50;  border-radius:100%;  Width: @size;  Height: @size;} #small-circle{  #circle} #big-circle{  #circle (100px)}

CSS file:

#small-circle {  background-color: #4CAF50;  border-radius:100%;  width:25px;  height:25px;} #big-circle {  background-color: #4CAF50;  border-radius:100%;  width:100px;  height:100px;}

(add: After using the mixins of the parameter, we find that the class is only added when compared to the previous example, and that the previously added class is not saved, and the class that was added in the previous example is also saved, please note.) ）

Part IV: Nesting and scoping

Nesting can be used to structure our stylesheets so that we can match our HTML structure and thus reduce conflicts. The following is an example of an unordered list and its child elements:

Less files:

ul{  background-color: #03A9F4;  padding:10px;  List-style:none;  li{    background-color: #fff;    border-radius:3px;    margin:10px 0;  }}

CSS file:

UL {  background-color: #03A9F4;  padding:10px;  List-style:none;} UL li {  background-color: #fff;  border-radius:3px;  margin:10px 0;}

Just as in programming languages, variables in less receive their values as determined by scope. If the value does not exist in a particular scope, less will be found in the scope of the ancestor until it finds the most recent declaration. (add: Here I think that there is a block-level scope in less)

The following example, converted to CSS, our Li will have a white font, because we defined in advance @text-color in the UL rules.

Less files:

@text-color: #000000, ul{  @text-color: #fff;  Background-color: #03A9F4;  padding:10px;  List-style:none;  li{    color: @text-color;    border-radius:3px;    margin:10px 0;  }}

CSS file:

/* Line 3, text.less */ul {  background-color: #03A9F4;  padding:10px;  List-style:none;} /* Line 9, text.less */ul li {  color: #ffffff;  border-radius:3px;  margin:10px 0;}

Part V: Operation

You can do simple math operations on numbers and colors. If we want to put two div next to each other, the second div is twice times the width of the first one, and has a different background, less knows how to measure and doesn't confuse them.

Less files:

@div-width:100px; @color: #03A9F4;d iv{  height:50px;  Display:inline-block;} #left {  width: @div-width;  Background-color: @color-100;} #right {  width: @div-width * 2;  Background-color: @color;}

CSS file:

div {  height:50px;  Display:inline-block;} #left {  width:100px;  Background-color: #004590;} #right {  width:200px;  Background-color: #03a9f4;}

Part VI: Functions

Less also has a function! It looks more like a programming language, doesn't it? Let's look at the fade effect and see how a function reduces the transparency of the color.

Less files:

@var: #004590;d iv{  height:50px;  width:50px;  Background-color: @var;  &:hover{    background-color:fadeout (@var, 50%)  }}

CSS file:

div {  height:50px;  width:50px;  Background-color: #004590;} Div:hover {  Background-color:rgba (0, 69, 144, 0.5);}

According to the code above, when our div is crossed, it becomes translucent. There are also a number of useful functions for manipulating colors, detecting the size of images, and even embedding resources into stylesheets like Data-uri. Look at all the functions here.

　　

Further reading

You now know less enough to start learning more! Each CSS file is a valid less style sheet, so you can now clean up what old, clumsy CSS files are. When you learn more, you will be able to write better code. Here's what we recommend you to read Next:

• All the syntax: link
• Less function Reference: Link
• Edit and compile online in the browser: link

"Forward from http://www.cnblogs.com/zhuzhenwei918/p/6142144.html"

10-minute entry less (translated from: Learn less in Minutes (or less))