#【博学谷学习记录】超强总结，用心分享#less的使用

less是什么

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

常见的CSS预处理器及CSS弱点

常见的CSS预处理器：Sass、Less、Stylus
css弊端
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

Less中可以使用变量，使用@符号来定义变量；
Less是一门 CSS扩展语言，也称为CSS预处理器；
Less大大简化了 CSS 的编写，并且降低了 CSS的维护成本；
Less可以让我们用更少的代码做更多的事情

CSS安装

1. 在vscode中安装
2. 在node.js里安装

Less安装
安装nodejs，可选择版本(8.0)
使用cmd命令“npm install -g less”即安装less
lessc -v 查看版本

less语法

less中的变量：
1.定义: @变量名:值;
2.使用: css属性:@变量名;

Less 变量
变量是指没有固定的值，可以改变的
@变量名:值;
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
Less 运算
Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
任何数字、颜色或者变量都可以参与运算

注意
	乘号（*）和除号（/）的写法  ***在使用Less语法进行除法运算时，需要加上括号，才能保证该运算表达式在任何情况下就都可以执行。***
	运算符中间左右有个空格隔开 1px + 5
	对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 
	如果两个值之间只有一个值有单位，则运算结果就取该单位

less导入与导出

• 导入

导入的写法两种
@import ‘base.less’和@import ‘base’都可

• 导出
  在扩展设置中输入