Less: Elegant writing of CSS code

CSS is not able to define variables, nor can it be nested. It does not have the characteristics of a programming language. In project development, it is often found that a lot of CSS code is the same, but we usually copy and paste.

For example, suppose that the theme color in the H5 application is #FF3A6D that it may be used for text or background color. Usually in development, where this color is needed, we copy the color and paste it. The next time you want to modify the full search for bulk replacement, in fact, not very convenient.

The less we're about to introduce in this article will allow us to write CSS code faster and more easily.

What's less?

Less is a CSS preprocessing language, it expands the CSS language, add such functions as variable, mixed (mixin), function, make CSS easier to maintain, easy to create themes, expand.

Less is used .less as a file suffix. With third-party tools, you can compile the corresponding CSS file in one click or in real time.

Example:
Demo.less

@base: #f938ab; /* Defining Variables */ . Box {  color: @base;  Border /* use the function */  * nesting *  / &-content{    width:%;  }  . title{    color: #ccc;  }}

After compiling with a third-party tool, build:
Demo.css

. Box {  color: #f938ab;  Border-color: #fdcdea;}. Box-content {  %;}. Box. Title {  color: #ccc;}

In the actual project, we edit the .less file, but the reference is still quoted as usual .css . With third-party tools (for example, Koala), you can .less create a file with the same name when the file changes .css .

Language Features

Since the less file itself is text, there is no need to specifically install an editor and the usual Code Editor can edit it. Recommended sublime text (Install plug-ins Less is recommended to support less syntax highlighting).

Variable

use @ symbol definitions . For example:

@base: #f938ab;.box {    color: @base; /*变量引用*/}

The function of a variable is to define the value in one place (or a file, by @import importing it) and then use it everywhere, which makes the code easier to maintain.

Variables also support URLs:

// Variables@images: "../img";// 用法body { color: #444; background: url("@{images}/white-sand.png");}

Attributes also support the form of variables:

@property: color;.widget {  #0ee;  [email protected]{property}: #999;}

Mixing (Mixin)

blending is a previously defined style, which can be referenced directly later . Example:

#f938ab;.ellipsis_txt {    display: -webkit-box;    -webkit-line-clamp: 2; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-box-orient: vertical;}.box { color: @base; .ellipsis_txt; /*或者 .ellipsis_txt(); */}

The parentheses are optional.

Nesting

you can have multiple CSS blocks in a CSS to make it easier for us to organize the code and to write CSS Templates .

#header {  color: black;  .navigation {    font-size: 12px; } .logo { width: 300px; }}

Generated:

#header {  color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 300px;}

also supports & symbols:

#header {  color: black;  &-navigation {    font-size: 12px; } &-logo { width: 300px; } &:hover{ color:#ccc; }}

Generated:

#header {  color: black;}#header-navigation {  font-size: 12px;}#header-logo { width: 300px;}#header:hover { color: #ccc;}

Operation

Any number, color, or variable can participate in the operation. Here is a set of cases:

5%;@filler: @base * 2;@other: @base + @filler;color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;

Example:

@var: 1px + 5;div{ width:@var;}

Output:

div {  width: 6px;}

Function

Less contains several functions for converting colors, handling strings, arithmetic operations, and so on. These functions are described in detail in the function manual.

The use of functions is very simple. The following example shows how to convert 0.5 to 50%, increase the color saturation by 5%, and decrease the color brightness by 25% and increase the hue value by 8:

@base: #f04615;@width: 0.5;.class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8);}

Compile Build:

.class {  width: 50%;  color: #f6430f; background-color: #f8b38d;}

Name space

Sometimes you might want to organize your CSS or simply wrap it up for better encapsulation, and some of the properties set can be reused.
Example:

/*模块*/#bundle {  .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { /**/ } .citation { /**/ }}/*下面复用上面的一部分代码*/#header a { color: orange; #bundle > .button;}

Compile Build:

#bundle. button {Display:block;Border1px solid black;Background-color:grey;}#bundle. button:hover {background-color:white;}  #bundle .tab {/**/}< Span class= "Hljs-selector-id" > #bundle .citation {/** /}/* the next part of the code is reused */ #header a {color:orange; display:block; border: 1px solid black; background-color:grey;}  #header a: Hover {background-color:white;}         

The namespaces in less, which are advanced syntax, are widely used in everyday projects. We can use the namespace in less to encapsulate some of the commonly used class names for ourselves in order to be more efficient at later projects.

Scope

Sub-class within the first, can not find to find in the parent class.

Example:

@var: red;#page {  @var: white;  #header { color: @var; // 这里值是white }}

The scope is also not affected by the definition behind the variable:

@var: red;#page {  #header {    color: @var; // white } @var: white;}

And the example above is the same.

Comments

CSS only supports block annotations. Less block comments and line comments are available:

/* 一个注释块style comment! */@var: red;// 这一行被注释掉了！@var: white;

Import

Like CSS, you can import a .less file, and all of the variables in this file can be used. If the imported file is an .less extension, you can omit the extension:

@import "library"; // library.less@import "typo.css";

Function reference

Color (string) to resolve colors, convert a string representing a color to a color value convert (ValueUnit) converts a number from one unit to another. The first parameter is a numeric value with a unit, and the second parameter is the unit. Ceil (Number) rounding upFloorNumber) to take the whole percentage down (Number) converts a floating-point number to a percent stringRoundNumber) Rounds roundingsqrtNumber) calculates the square root of a count and keeps the unit POW (NumberNumber) sets the first parameter to a, the second parameter is B, and returns the B-second side of a.MoDNumberNumber) Returns the result of the first parameter's remainder on the second parameter.Min (value1, ..., Valuen) returns the smallest of the series of values.Max (value1, ..., Valuen) returns the largest of a series of values.Absnumber) calculates the absolute value of the digit, and keeps the unit sin (numbers)sine function as the cos (number) cosine function asin theinverse chord function. Returns the angle in radians , the interval isbetween-pi/2 to pi/2.  ACOs (number) inverse cosine function. The interval is between 0 and pi.  Tan (number) tangent function Atan (number) the inverse tangent function pi () returns the Pi (pi) isnumber (value) if the value to be verified is numeric then returns TRUE, otherwise returns Falseisstring (value) returns True if the value being validated is a string, otherwise returns Falseiscolor (value) if the value being validated is a color returns true, otherwise false 

Less: Elegant writing of CSS code