less css预处理语言

第一步: 安装Easy Less插件。
第二步: 使用 新建less文件 --> 保存编译后默认生成.css文件。
通过vscode修改配置文件，可以编译为其他文件。
 "less.compile": {
    "outExt": ".wxss" 在小程序中使用less
  }

mixins-- 非常实用的less定义样式写法。
 -- alert.less
.alert-variant(@background; @border; @text-color) {
  color: @text-color;
  background-color: @background;
  border-color: @border;

  hr {
    border-top-color: darken(@border, 5%);
  }
  .alert-link {
    color: darken(@text-color, 10%); // 这是less的内置函数
  }
}

.alert.less 文件 使用定义的mixins
.alert {
  padding: @alert-padding;
  margin-bottom: @line-height-computed;
  border: 1px solid transparent;
  border-radius: @alert-border-radius;
	
	&.alert-success {
		.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
	}

	&.alert-info {
		.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
	}

	&.alert-warning {
		.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
	}
}

-- background-variant.less
.bg-variant(@color) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: darken(@color, 10%);
  }
}


/*
less嵌套 &代表的上一层选择器的名字，此例便是header。
*/
.header {
  .title-test {
    font-weight: bold;
    color: skyblue;
  }
  &-content {
    color: pink;
    font-size: 16px;
  }
}

/*
 属性变量 bootstrap3.0源码中几乎没有
*/
@fontSize: font-size;
.ft-var {
	@{fontSize}: @ft18; //变量名 必须使用大括号包裹
}

/*
属性值变量 （bootstrap源码中用的第一多）
*/
@base: #f938ab;

/*
url变量
*/
@url-container: .url-container;
@images: '..';

@{url-container} {
  background-image: url('@{images}/assets/logo.png');
  width: 200px;
  height: 200px;
  border: 1px solid skyblue;
}

/*
让选择器变成变量
*/
@my-class: .class-container; // 类选择器变量
// 给类名(变量)添加样式
// 注意1: 变量名必须使用大括号包裹
// 注意2: 这里使用的变量如果没有定义编译报错
@{my-class} {
  color: @base;
}


/*
定义变量声明多个属性,然后使用属性。有点类似于混合方法
结构: @name: { 属性: 值 ;};
使用：@name();
*/
@background: {
  width: 200px;
  height: 200px;
  margin-top: 10px;
  border: 1px solid #ccc;
};
.bgc {
  @background();
}

/*
混合方法的使用 less混合 mixin
*/

#card {
  background: pink;
  -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, 0.58);
  box-shadow: 0 1px 2px rgba(124, 109, 109, 0.58);
}

.mixin-top {
  width: 200px;
  height: 200px;
  #card(); // 等同于 不加()
}

/*
方法的使用  bootstrap3.0源码中使用的次数也很频繁。-----
*/
// 方法的定义
.alert-variant(@background; @border; @text-color) {
  color: @text-color;
  border-color: @border;
  background-color: @background;
  // border: @arguments;//指代的是 全部参数
}
// 方法的调用
.alert-primary {
	.alert-variant(@alert-primary-bg-color, @alert-primary-bd-color, @alert-primary-text-color);
}
.alert-danger{
	.alert-variant(@alert-danger-bg-color, @alert-danger-bd-color, @alert-danger-text-color);
}

/*
less避免编译
less里面有一个避免编译，使用less不认识的专有语法。
我们是让浏览器计算，不是让less计算

结构： ~'@{变量}';

iview写法参考
@message-prefix-cls: ~"@{css-prefix}message";
@icon-prefix-cls: ~"@{css-prefix}icon";
*/
/*
这个calc，有时候我们是让浏览器计算，不是让less计算
*/
.test_03 {
  width: 300px;
  height: calc(300px - 30px);
  background-color: pink;
}
// 避免less编译
.test_04 {
  width: 300px;
  height: ~'calc(300px - 30px)';
  background-color: skyblue;
}

/*
继承的使用
*/

/* Less */
.parent {
	width: 200px;
	height: 40px;
	background-color: skyblue;
}
.child {
	.parent
}

/*
输出:

.parent {
  width: 200px;
  height: 40px;
  background-color: skyblue;
}

.child {
  width: 200px;
  height: 40px;
  background-color: skyblue;
}
*/

// when相当于条件判断

/* Less */
#card-test {
  // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
  .border(@width, @style,  @color) when (@width>1px) and (@color=#999) {
    border: @width @style @color;
  }

  // not 运算符，相当于 非运算 !，条件为 不符合才会执行
  .background(@color) when not (@color>=#222) {
    background: @color;
  }

  // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
  .font(@size:20px) when (@size>50px) , (@size<100px) {
    font-size: @size;
  }
}
/*
递归的使用
*/

// 循环 递归条件 @counter > 0
.loop(@counter) when(@counter > 0) {
  .h@{counter} {
    padding: (10px * @counter);
  }
  .loop((@counter - 1)); //递归调用自身
}

.loop-container {
  .loop(5);
}

/*
less匹配模式
*/
// 根据传参的值不同进行匹配
.a(@_,@z) {
  // @_:所有情况都会执行的公共模式
  font-size: @z;
}
.a(right, @m) {
  // 只有是right的时候，会执行
  margin-right: @m;
}
.a(left, @m) {
  // 只有是left的时候，会执行
  margin-left: @m;
}

// 调用
.x {
  .a(right, 20px);
}

.y {
  .a(left, 15px);
}

// 使用less的匹配模式做一个三角形的效果
.match(top,@w,@c) {
  border-width: @w;
  border-color: transparent transparent @c transparent;
  z-index: 10;
}
.match(bottom,@w,@c) {
  border-width: @w;
  border-color: @c transparent transparent transparent;
}
.match(left,@w,@c) {
  border-width: @w;
  border-color: transparent @c transparent transparent;
}
.match(right,@w,@c) {
  border-width: @w;
  border-color: transparent transparent transparent @c;
}
//@_: 所有情况都会执行的公共模式  + 然后再调用top match函数
.match(@_,@w,@c) {
  width: 0;
  height: 0;
  border-style: solid;
}

.sanjiao {
  .match(top, 3px, skyblue);
}