less

变量

在sass中用 $

@height: 200px;
div{
	height: @height;
}
//编译后
div{
	height: 200px;
}

选择器变量 、属性变量、路径变量

//以选择器变量举例
@main: main;
@{main}{
  width: 100px;
}
.@{main}{
  width: 200px;
}
#@{main}{
  width: 300px;
}
//编译后
main {
  width: 100px;
}
.main {
  width: 200px;
}
#main {
  width: 300px;
}

作用域

@width:100px;
div{
  width:@width;
}
p{
  @width:200px; //优先级高于全局变量、但不是重新赋值，而是声明了一个局部变量
  width: @width;
  color: #fff;
}
a{
  width: @width;
  height: 200px;
}
// 编译后
div {
  width: 100px;
}
p {
  width: 200px;
  color: #fff;
}
a {
  width: 100px;
  height: 200px;
}

Mixins 无参数

声明时无参数调用时不可传参数

.flex-cen-cen {
  display: flex;
  align-items: center;
  justify-content: center;
}
.point{
  .flex-cen-cen()	//可以不加括号
}
.main {
.flex-cen-cen
}
// 编译后
.flex-cen-cen {
  display: flex;
  align-items: center;
  justify-content: center;
}
.point {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 加括号与否此处并无差别

Mixins 有参数

声明时有参数调用时不可传参数，否则必传

.btn-fixed-bottom (@width: 100px, @height: 200px){
  width: @width;
  height: 100px;
}
.point{
  .btn-fixed-bottom(30px);
}
// 编译后
.point {
  width: 30px;
  height: 100px;
}

指定参数

.btn-fixed-bottom (@width: 100px, @height: 200px){
  width: @width;
  height: @height;
  padding: 100px;
}
.point{
  .btn-fixed-bottom(@height: 30px);
}
// 编译后
.point {
  width: 100px;
  height: 30px;
  padding: 100px;
}

所有参数

.btn-fixed-bottom (...){
  padding: @arguments;
}
.btn-fixed-bottom2 (@width, ...){
  margin: @arguments;
  width: @width;
}
.point{
  .btn-fixed-bottom(30px, 20px, 10px, 60px);
  .btn-fixed-bottom2(100px,30px, 20px, 10px, 60px);
}
// 编译后
.point {
  padding: 30px 20px 10px 60px;
  margin: 100px 30px 20px 10px 60px;
  width: 100px;
}

运算 、 条件运算

// 全部满足才执行
.btn-fixed-bottom(@top, @right, @bottom, @left) when (@top > 100px) and(@right >= 300px){
  padding: @top, @right, @bottom, @left;
}
// 满足其中之一就执行
.btn-fixed-bottom2 (@top, @right, @bottom, @left) when (@top > 100px), (@right >= 300px){
  margin: @arguments;
}
// 不满足条件才执行
.btn-fixed-bottom3 (@top, @right, @bottom, @left) when not (@top >= 10px){
  border-width: @arguments;
}
// not 运算符，相当于 非运算 !，条件为 不符合才会执行
// .background(@color) when not (@color>=#222){
//   background:@color;
// }
.point{
  .btn-fixed-bottom(101px, 300px, 10px, 20px);
  .btn-fixed-bottom2(100px,300px, 20px, 10px);
  .btn-fixed-bottom3(10px,30px, 20px, 10px);
}
.point2{
  .btn-fixed-bottom(100px, 300px, 10px, 200px);
  .btn-fixed-bottom2(100px,30px, 20px, 299px);
  .btn-fixed-bottom3(9px,30px, 20px, 10px);
}
// 编译后
.point {
  padding: 101px, 300px, 10px, 20px;
  margin: 100px 300px 20px 10px;
}
.point2 {
  border-width: 9px 30px 20px 10px;
}
 + - * / 等运算与scss并无二致

cacl() // 不会对起进行编译 会计算其中的变量

属性连接

逗号连接 +

.btn-fixed-bottom (){
  box-shadow+: 0px -10px 0px 0px #ff0000;
}
.btn-fixed-bottom2 (){
  box-shadow+: 10px 0px 0px 0px #2279ee, 0px 10px 0px 0px #eede15;
}
.point{
  .btn-fixed-bottom();
  .btn-fixed-bottom2();
}
// 编译后
.point {
  box-shadow: 0px -10px 0px 0px #ff0000, 10px 0px 0px 0px #2279ee, 0px 10px 0px 0px #eede15;
}

空格连接 +

.btn-fixed-bottom (){
  padding+_: 10px;
}
.btn-fixed-bottom2 (){
  padding+_: 20px;
}
.point{
  .btn-fixed-bottom();
  .btn-fixed-bottom2();
}
// 编译后
.point {
  padding: 10px 20px;
}