前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的。往深入了说还需要懂得技术的应用场景,与之配合的技术等,方便为以后架构做准备。而less作为一门CSS预处理语言,拥有函数式变成的特点,主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在:项目公共样式的定义,如页面主色、固定数值(宽、高、时间等)、公用样式模板、封装省略浏览器兼容前缀的函数等。
1.less的两种使用方式
1.1 直接调用需要引入less.js,和less样式文件,需要注意的是rel需要指定为stylesheet\less。此方式也是在浏览器内部最终将less中的样式转换成css样式之后调用。因页面加载时资源请求较多,故不推荐此方法。
<link rel="stylesheet/less" href="./lessTest.less"/> <script src="./less.js"></script>
1.2 将less文件编译为css文件后引入,博主使用的是考拉工具,大家可以自行百度。
less语法(本文为了方便将直接使用引入lessTest.less文件的方式,实际开发中建议使用第二种方式)
2. 定义变量 @变量名:变量值;
///定义颜色变量 @pe_color:#204d90; .div1{ width: 100px; height: 100px; background: @pe_color; }