less基础知识

定义：

什么是less？ less是一个css预处理器，可以为网站启用可自定义、可管理和可重用的样式表；扩展了CSS样式，增加了变量、Mixin、函数等特性；less可运行在node或浏览器端；

优势：

• LESS轻松地生成可在浏览器中工作的CSS。
• LESS使您能够使用嵌套编写更干净，组织良好的代码。
• 通过使用变量可以更快地实现维护。
• LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
• LESS提供使用操作，使得编码更快并节省时间。

安装：

npm install -g less(提前安装node.js)    可在less后通过@*.*.*指定安装版本; less -v获取less版本

使用：

   Less在线编译器可以帮助我们生成CSS代码（w3cschool提供了在线编译器）；

1.新建一个.html和.css文件，然后再建立一个.less文件(同一目录下)；

2.将.less文件编译为.css文件供.html文件使用, 命令：lessc **.less **.css（当.less文件被修改后都要使用这个命令再次编译）

注：.less文件的简单示例

@back-color:#fff000;

@high:100px;

h1{

color:@back-color;

}

img{

high:@high;

}

Less变量：@变量名: 变量值

嵌套：在less文件中可以用结构化的形式定义样式表（存在嵌套关系），如：

.less文件中

.picture{

h1{

font-size:12px;

background-color:red;

}

p{

padding:10px;

margin:10px;

｝

}

转换为.css文件后：

.picture h1

{

font-size:12px;

background-color:red;

}

.picture p{

padding:10px;

margin:10px;

}

mixin:混入/混合，将一个类嵌入另一个类中，被嵌入的类可看作是外面类的变量。

算术运算符：less支持简单的算术运算符，如+,-,*,/，可以对任何数字、颜色或变量进行操作，如

.less文件 

@size:10px;

p{

font-size:@size*2;

}

编译后在.css文件中  ： lessc **.less  **.css

p{

font-size:20px;

｝

less转义 

~ "字符串文本" ====>>> 字符串文本   

.less p{color:~"red";}      .css  p{color:red;}

less函数：

Less命名空间和访问器

将mixins分组在通用名称下，使用命名空间可以避免名称冲突，并从外部封装mixin组

Less变量范围

变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索

Less注释  /* */ 和 // 但单行注释//不会显示在.css文件中

Less导入 可导入已生成好的.less和.css文件 

@import  "**.less" //这句代码可放在任何位置

Less混合: 

.less文件中 

.p1｛

 color:res;

｝

.p2{

font-size:20px;

.p1();//复用 .p1的样式

}

.css 文件：

.p2{

font-size:20px;

color:red;

}

Less数学函数：

ceil(),floor(),percentage();round();sqrt();abs();sin();asin();cos();acos();tan();atan();pi();pow();mod();min(x1,x2,x3[,,,,]);max(x1,x2,x3[,,,,]);

LessL类型函数（判断某个值是否属于某个类型）

isnumber();isstring()等等

Less颜色函数 ：使定义和操作颜色变得超级简单，帮助你控制颜色、更好地配色

rgb();rgba();

Less颜色操作函数 改变颜色强度、透明度等