1、认识less
众所周知，css是层叠样式，是构建页面（HTML）必不可少的；使用css我们可以实现很多漂亮的页面展示，各种不一样的动画效果等等，虽然css功能很强大，可以实现很多效果，但它也有一些不足，如没有变量的说法，没有函数，简单易懂，毫无逻辑，单纯写很繁琐等等；面对这些问题，作为一名优秀的程序员，当然就会去解决这些问题，于是就诞生了sass，less， stylus预处理语言。
less向后兼容css，less与css很相似，所以易懂，但它在css的基本上添加很多新的特性，如变量，函数，混合，嵌套等，它让css写起来不在那样的繁琐，加快了开发。
2、使用less
2.1安装
全局安装less
npm install less -g
安装具体版本（在less后加上@VERSION）
npm install less@2.7.1 -g
开发模式安装
npm i less --save-dev
2.2使用
less文件是无法直接在浏览器中使用的，需要转成css文件，或者引入官网中的less.js文件。
例如：
1、在cmd里编译less文件
lessc bootstrap.less bootstrap.css
2、在koala等编译程序中编译less文件为css
3、在浏览器中引入（文件可在官网中下载）
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
变量
1、普通变量（以@开头）
@bgColor: red;
.box {
background: @bgColor
}
2、选择器变量（变量用{}括住）
@bgColor: .box;
@{bgColor} {
background: yellow;
}
也可以表示这样，在变量前面添加选择操作符
@bgColor: box;
.@{bgColor} {
background: yellow;
}
3、属性变量
@borderStyle: border;
.box{
@{borderStyle}: 2px solid red
}
4、url变
@img： "../img";
a {
background: url（”@{img}/cat.jpg“）
}
5、变量作用域
就近原则
如果是同一级后面的生效，类似于提升。
混合方法
把公共的样式抽离出去，成为一个方法，然后在需要用到它的选择器中混入；
“.”与“#”都可以作为方法前缀。
无参数
.publicBox(){ // 公共选择器样式
width: 200px;
height: 200px;
border: 2px solid pink;
}
.box3{
.publicBox();
}
有参数
.publicBox(@styleColor, @fontSize: 20px){ // 公共选择器样式,默认参数
width: 200px;
height: 200px;
border: 2px solid pink;
background: @styleColor;
font-size: @fontSize;
}
.box3{
.publicBox(purple);
}
不定参数
.publicBox3(@styleColor, ...){ // 公共选择器样式
width: 200px;
height: 200px;
border: 2px solid pink;
background: @styleColor;
box-shadow: @arguments; // box-shadow: green, 40px, 10px, 20px red;
}
.box4{
.publicBox3(green, 40px, 10px, 20px red);
}
同名方法匹配（假如全部符合，就代入所有的方法，否则只代入某一个。）
.setBox(@styleColor, @fontSize: 30px, @fontColor: yellow) {
width: 200px;
height: 200px;
background: @styleColor;
font-size: @fontSize;
color: @fontSize;
}
.setBox(@styleColor) {
width: 100px;
height: 100px;
background: @styleColor;
}
.setBox(@styleColor, @fontSize: 40px) {
width: 50px;
height: 50px;
background: @styleColor;
font-size: @fontSize;
}
.box5 {
.setBox(green)
}
// css
.box5 {
width: 200px;
height: 200px;
font-size: 30px;
color: 30px;
width: 100px;
height: 100px;
width: 50px;
height: 50px;
background: #008000;
font-size: 40px;
}
条件语句
less不想其他语言，拥有if-else；它只有when，and，not 和 ”，“来实现条件判断。
and相当于&&，”，“相当于||， not相当于!
.box6Style (@fontSize, @color: red) when (@fontSize > 20px) and (@color = red){
font-size: @fontSize;
}
.box6 {
.box6Style(30px, pink) // 条件不满足
}
命名空间和嵌套
@var: red;
.page {
.header
{ color: @var;
}
// css
.box7 {
color: white
}
属性拼接语法
+_（空格），+（逗号）。
空格
.box8Style() {
transform+_: scale(2);
}
.box8 {
.box8Style();
transform+_: rotate(15deg);
}
// css
.box8 {
transform: scale(2) rotate(15deg);
}
逗号
.box8Style() {
transform+_: scale(2);
}
.box8 {
.box8Style();
transform+: rotate(15deg);
}
// css
.box8 {
transform: scale(2), rotate(15deg);
}
避免编译（~）
.box9{
width: ~‘calc(90px-70px)’
}
//css
.box9 {
width: calc(90px-70px)
}
结束语
以上就是我对现阶段less的学习。less是一个很好的css预处理语言，它能帮我们解决一些css的短处，也让我们写起来很舒服；经过几天的less学习，对于less基本的语法我已掌握了，但一些比较高深的还是有点欠缺，我会更加努力学习相关知识的。
