@Author：Runsen
@Date：2020/5/31

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。

本文接着上面Bootstrap，本想进入ajax的，但是发现LESS好像忘记了。

Less

Less是CSS的预编译语言，可以让编写CSS的过程更加简单、高效、快捷，让一沉不变的CSS充满活力和生机。有的时候，多次出现的相同属性，这样代码很多，就需要重整。

这样 Less预处理CSS就拉了，比如经常出现下面的CSS代码

#test1 { color: #fff;
}

#test2 { color: #fff;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

变量使用

整个项目中可能会出现N个相同的color，维护起来非常麻烦。Less使用“变量”解决了这个问题！

@white: #fff; // 使用@定义一个变量

#test1 { color: @white; // 引用变量
}

#test2 { color: @white; // 引用变量
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

还能使用一些简单的运算符，让任何数字，甚至颜色都可以进行运算，这些和JavaScript一样的。

@length: 5px + 5; // 这样变量就被赋值为 10px
@doubleLength: @length * 2; // 变量 * 2
@addLength: @length + @doubleLength; // 变量之间相加  

#test { color: #888 / 4; // 颜色运算 height: (@length + 5) * 2; // 使用括号进行优先级运算 border: (@length + 1) solid red; // 使用在多参数属性中
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

编译less

less 的编译指的是将写好的 less 文件 生成为 css 文件。先去W3C的LESS教程偷窥一下。

下面就是安装less，需要安装node先，具体的看W3C。

C:\Users\YIUYE>npm install -g less
D:\nodejs\node_global\lessc -> D:\nodejs\node_global\node_modules\less\bin\lessc
+ less@3.11.1
added 60 packages from 123 contributors in 33.704s ╭────────────────────────────────────────────────────────────────╮ │ │ │ New minor version of npm available! 6.4.1 -> 6.14.5 │ │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.5   │ │ Run npm install -g npm to update! │ │ │ ╰────────────────────────────────────────────────────────────────╯


C:\Users\YIUYE>lessc
lessc: no input files
usage: lessc [option option=parameter ...] <source> [destination]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

在 less 所在的路径下，输入 lessc xxx.less，即可编译成功。或者，如果输入 lessc xxx.less > ..\xx.css，表示输出到指定路径。

除了LESS，还有比如Sass都是一回事，先水一篇。毕竟这个LESS没必要深入研究，因为后面vue会完成的。

文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。

原文链接：maoli.blog.csdn.net/article/details/106463311