Less usage guide_html/css_WEB-ITnose

Contents:

What is LESS

Purpose

Syntax

Variables

Mixing(Mixins)

　Operations

　 Functions(Functions)

　Nested Rules(Nested Rules )

　 Namespaces (Namespaces)

>What is LESS

LESSCSS is a dynamic style language and a type of CSS preprocessing language. It uses a syntax similar to CSS and gives CSS the characteristics of a dynamic language, such as variables, Inheritance, operations, functions, etc. make it easier to write and maintain CSS.

LESSCSS can be used in multiple languages ​​and environments, including browsers, desktop clients, and servers. 　

LESSCSS is a dynamic cascading style sheet language designed by Alexis Sellier. Influenced by Sass, it also influenced Sass's new syntax: SCSS. [1]

LESSCSS is open source. Its first version was written in Ruby, but in subsequent versions, Ruby was gradually reused as JavaScript. Thanks to JavaScript, LESS can run on the client (IE6, Webkit, Firefox) or on the server (Node.js, Rhino).

　

2. Purpose

　Study notes, adding some experiences. At the same time, I also hope that I won’t have to refer to official documents in the future. Chinese official website, English official website.

　

3. Syntax:

　

3.1. Variables

In fact, it should be called a constant. Because only the last assignment can be taken.

Grammar rules:

@Variable name: value;

Value can be a css attribute value or other variable

3.1. 1 css attribute value

After compilation:

It can be seen from the compiled result that only the last assignment of the variable is taken result.

@backColor: yellow;.a {    background-color: @backColor;}@backColor: blue;.b {    background-color: @backColor;}

3.1.2 Variable names are used as variables

.a {  background-color: #0000ff;}.b {  background-color: #0000ff;}

After compilation:

@backColor: blue;

Note:

Only supports @@, not >2@. 3.1.3 Scope

@com: color;@color: #111;#header {    background-color: @@com + 5 * 2;    color: @color;}

After compilation:

#header {  background-color: #1b1b1b;  color: #111111;}

It can be seen that the variable scope processing method in LESS is consistent with js, using chaining scope mode. As for the nested writing method above, you don’t need to understand it now, we will talk about it later.

@color: red;#header {  @color: white;  .a {    color: @color; // white  }}.b {  color: @color; // red  }

　

Usage:

#header .a {  color: #ffffff;}.b {  color: #ff0000;}

　1. Unified style modification (of course, before LESS, we can also implement it through specifications);

2. The four arithmetic operations (

Operations), although there are only four, can already complete most functions; Use it like a function;

4. The same chain scope as js, which is very easy for front-end engineers to understand.

　

3.2 Mixins 　

I divide it into two forms:

function and reuse.

The first bad smell is usually Duplicated Code. How to solve it? It's code encapsulation. Mixins are such a function.

　　

Function:

　Compiled code:

　　

Note: There is no .c related content after compilation.

　

@arguments

　

.c(@bg: red) {    background-color: @bg;    width: 100px;    height: 200px;}@bgc: yellow;.a {    .c(@bgc);}@bgColor: @bgc + #111;.b {    .c(@bgColor);}.d {    .c();}

This writing method borrows the function parameters of js. Generally used for some abbreviations:

.a {  background-color: #ffff00;  width: 100px;  height: 200px;}.b {  background-color: #ffff11;  width: 100px;  height: 200px;}.d {  background-color: #ff0000;  width: 100px;  height: 200px;}

Compiled:

Reuse:

Compiled Afterwards

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){    -moz-box-shadow: @arguments;    -webkit-box-shadow: @arguments;    box-shadow: @arguments;}#header {    .boxShadow(2px,2px,3px,#f36);}

Did you find out? Both .e and #f content are present.

#header {  -moz-box-shadow: 2px 2px 3px #ff3366;  -webkit-box-shadow: 2px 2px 3px #ff3366;  box-shadow: 2px 2px 3px #ff3366;}

　Note: class, id attribute sets can be reused in the same way.

.d {    .e;}.e {    position: absolute;}#f {    position: relative;;}.m {    #f;}

The difference between "function" and "reuse":

.d {  position: absolute;}.e {  position: absolute;}#f {  position: relative;}.m {  position: relative;}

1. The former can pass parameters;

2. The former does not exists, the latter still exists. 　

Usage:

1. Code encapsulation;

2. Together with variables, use it like a function. After encapsulation, we can unify the style Modification;

3. Style reuse, mainly for "reuse".

　

3.3 Operators (Operations) 　

　　目前仅支持加、减、乘、除四则运算，主要针对数字、颜色、变量的操作。

@baseWith: 100px;@baseHeight: 50px;@baseColor: #333;.a {        height: @baseHeight + 300;    min-width: @baseWith - @baseHeight;    width: @baseWith * 3;    color: @baseColor / 3;}

　　编译后：

.a {  height: 350px;  min-width: 50px;  width: 300px;  color: #111111;}

　　可以使用（）改变运算的先后顺序

@com: 25px;#header {    width: @com + 5 * 2;    height: (@com + 5 ) * 2;}

　　编译后：

#header {  width: 35px;  height: 60px;}

　　3.4 功能函数（Functions）　　

　　主要针对color的处理。提供如下函数：

lighten(@color, 10%);     // return a color which is 10% *lighter* than @colordarken(@color, 10%);      // return a color which is 10% *darker* than @colorsaturate(@color, 10%);    // return a color 10% *more* saturated than @colordesaturate(@color, 10%);  // return a color 10% *less* saturated than @colorfadein(@color, 10%);      // return a color 10% *less* transparent than @colorfadeout(@color, 10%);     // return a color 10% *more* transparent than @colorspin(@color, 10);         // return a color with a 10 degree larger in hue than @colorspin(@color, -10);        // return a color with a 10 degree smaller hue than @color

　　本人使用的不是很多，想了解更详细的新可以参考官网，或者这里。

　　3.5 嵌套规则（Nested Rules）

　　为了和上面做区分，同时带入一个新功能，以一个新例子开始。html代码如下：

<div id="header">    <h1><a href="http://www.cnblogs.com/hanyangecho/">hanyangecho</a></h1>    <p>我的世界</p></div>

　　LESS代码如下：

#header {    display: inline;    float: left;    h1 {        font-size: 26px;        font-weight: bold;        a {            text-decoration: none;            color: #f36;            &:hover {                text-decoration: underline;                color: #63f;            }        }    }    p {        font-size: 12px;    }}

　　编译之后：

#header {  display: inline;  float: left;}#header h1 {  font-size: 26px;  font-weight: bold;}#header h1 a {  text-decoration: none;  color: #f36;}#header h1 a:hover {  text-decoration: underline;  color: #63f;}#header p {  font-size: 12px;}

　　说实话，第一次看到这种写法的时候，我就爱上LESS了。这不就是DOM的写法吗？这种写法无论后期维护、理解都是那么自然。是不是有一种本来就该如此的感觉？

　　注意一下上面那个&符号。

在Less中嵌套书写中有没有&是完全不一样的效果，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素，我们一起来看一段代码

#header {    &.fl{        float: left;    }    .mln {        margin-left: 0;    }}

　　编译后：

#header.fl { float: left; }#header .mln { margin-left: 0; }

　　3.6 命名空间（Namespaces）

　　这种方式支持我们通过命名空间的方式访问上面嵌套中的“函数”或“复用”。

#header {    .a(@bgColor: red) {        background-color: @bgColor;    }    .b {        width: 100px;    }}.c {    #header > .a(yellow);     #header > .b;    height: 200px;}

　　编译后：

#header .b {  width: 100px;}.c {  background-color: #ffff00;  width: 100px;  height: 200px;}

　　 3.7注释（ Comments）

　　单行：//多行：/**/

 

参考：

　　http://www.w3cplus.com/css/less

　　http://www.lesscss.net/article/document.html