less语法和使用

　　常见CSS预处理器：Less / SASS / Stylus等。

Less预处理器：使用CSS语法，能够作一些逻辑处理，可使用变量、混合、运算、嵌套等。简化CSS的编写，下降了CSS等维护成本。

---

 

1. 安装及使用

1）VSCode插件（推荐）

在VSCode中安装插件Easy LESS。能够自动把less文件转换成css文件，保存less文件后自动更新。

2）Node

安装Node环境：（Mac版）

• 检测Node是否安装成功

在终端中输入：

node -v          node环境是否安装成功(若是安装成功,会出现版本号)

npm -v           检测包管理工具是否安装成功(若是安装成功,会出现版本号)

• 安装less

在终端输入：

npm install less -g

• 验证less是否安装成功

lessc -v

• 将less编译为css文件

在终端输入：

（首先要进入到当前less文件所在的文件夹目录中）

编译less文件cmd命令: lessc 要被编译的less文件 要编译为自定义CSS文件

例如:  lessc  index.less  index.css

 

2. Less

1）使用

less文件中能够写css代码。

语法：@变量名: 值;

调用：@变量名

1 @fsize: 18px; //把18px存在@fsize记号中 2 div {
3  font-size: @fsize; //调用 4 }

 

2）运算

运算符号：+ - * /

1 @w:120px; 2 div {
3  width: @w / 2;
4 }

 

3）嵌套

less中样式能够嵌套，保存后会自动生成css代码。

 1 div {
 2  width: 120px;
 3  height: 120px;
 4  a {  5  width: 100%;
 6  height: 100%;
 7  display: block ;
 8  span {  9  font-size:18px;
10     }
11  } 12 }

生成的css代码：

 1 div {
 2  width: 120px;
 3  height: 120px;
 4 }
 5 div a {
 6  width: 100%;
 7  height: 100%;
 8  display: block ;
 9 }
10 div a span {
11  font-size: 18px;
12 }

 

4）混合（函数的使用）

定义函数：把一段相同的代码交给一个函数来管理

 1 .public() { //定义函数  2  width: 400px;
 3  height: 500px;
 4  background: red;
 5 }
 6 div {
 7  .public(); // 调用函数  8 }
 9 p {
10  .public(); 11 }

.public(); 也能够换成 #public();，但后面调用也要用 #public();

 

传参数：

.public(@w) { }   // 小括号中的@w至关于假设有了具体的值

 1 //@w 表示假设的宽度, @h 表示假设的高度  2 .public(@w,@h) {
 3  width:@w;
 4  height: @h;
 5  background: red;
 6 }
 7 div {
 8  .public(600px,300px); // 调用  9 }
10 p {
11  .public(400px,100px); 12 }

参数的顺序 和 调用的实际值 是一一对应的。

 

函数参数的默认值：.public(@w:默认值,@h:默认值...){}

 1 .public(@w:400px,@h:400px) {
 2  width:@w;
 3  height: @h;
 4  background: red;
 5 }
 6 div {
 7  .public(600px,300px); // 调用，宽高为600px，300px  8 }
 9 p {
10  .public(); //没有传参，宽高为默认的400px，400px 11 }

 

5）引入less文件

1   <!-- 引入less文件 -->
2   <link rel="stylesheet/less" type="text/less" href="./08-index.less">
3   <!-- 引入js文件 -->
4   <script src="./less.js"></script>

js文件要放在less文件后面。

在本地运行没有效果。 （如：file:///C:/Users...）

在服务器上运行才能有效果。（如http://ip地址....）

 

安装服务器：在vscode→ 搜索插件live sever→ 安装→ 重启vscode→ 在html页面→鼠标右键点击→ open width live server