Less基础使用

Less基础使用

个人理解：less就是升级版css，可以使用变量、函数等，易维护

1. 基本用法

例如设置一个项目的主题色，大部分元素都要用到，如果用到的元素每个都写具体color:xxx；换个颜色不是就要全部修改？设置成变量，需要用到该颜色的都使用变量，以后修改颜色，只需要修改变量

//style.less

设置变量：（书写位置没有影响）
@mainColor : pink;  //@变量名 : 具体颜色

使用变量：
p{
	color: @mainColor;  //属性： @变量名
}

1.选择器设置为变量

//style.less

设置变量:
@acitive : 选择器名 ;

使用变量:
//如果是类选择器   
.@{acitive}{
	color:@mainColor ;
}

//如果是ID选择器
#@{acitive}{
	color:@mainColor ;
	font-size:20px;
}

---

2.$prop您可以使用语法轻松地将属性视为变量。有时这可以使您的代码更轻松。

.widget {
  color: #efefef;
  background-color: $color;
}

//编译成css
.widget {
  color: #efefef;
  background-color: #e