前端基础26：less常规用法

less

• 开发环境(dev) 生产环境(pro 就是线上)

• dev中可以引入less.main.js去解析引入less的link的rel="stylesheet"需要改为rel="stylesheet/less"

• dev用解析工具直接生成(webpack)

• pro 会将less先解析成css再上上线

• 在index.less所在的文件夹运行lessc indx.less index.css

• 将index.less编译成index.css(这个css名是自己起的)

• lessc index.less index.min.css -x

• 编译并压缩css文件

常用用法

嵌套

.outer{
  width: 300px;
  height: 300px;
  padding: 90px;
  background: deepskyblue;
  .inner{
    width: 200px;
    height: 200px;
    padding: 90px;
    background: gray;
    .center{
      width: 100px;
      height: 100px;
      padding: 90px;
      background: hotpink;
    }
  }
}

变量

• 通过@开头定义一个变量可以用 -（中扛）
• 使用的时候直接给对应的css属性赋值就行

@myPadding: 90px;
@color1:deepskyblue;
.outer{
  width: 300px;
  height: 300px;
  padding: @myPadding;
  background: @color1;

• 变量的常见用途
  • 1.主题更改，改变变量值即可改变主题
  • 2.路径提升

函数 混用

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
}
.box2{
  .box;
  background: navajowhite;
}

• 编译后(.box)依旧存在
• 在一个样式(.box2)可以直接写上(.box)
• 也就是把.box的样式完全复制一份过来，如果需求不同，再写不同的样式去覆盖

.box(@num){
  width: 100px;
  height: @num;
  background: skyblue;
}
.box2{
  .box(100px);
  background: navajowhite;
}

• 带小括号可以传参，(.box)就完全变成了一个函数，编译后就不会存在

• 函数返回值，如果有返回值，执行多次以第一次执行结果为标准

• 若没有返回值执行多次，每次都编译，以最后一次为准

变量提升

@fontSize:18px;
.box1{
  .box(0.1,0.2);
  .fonts(10,8);
  background: skyblue;
  opacity: @result;
  font-size: unit(@resultFontS,px);
  font-size: @fontSize; //4px
}
@fontSize:4px;
.box2{
  .box(0.2,0.5);
  .fonts(10,20);
  background: navajowhite;
  opacity:@result;
  font-size: unit(@resultFontS,px);
  font-size: @fontSize; //4px
}

• 函数也会作用提升

继承 extend

• .box1:extend(.box){}box1以这种方式继承box的样式，编译后是box，box1这样的形式，不是复制一份box的代码给box1
• .box1(.box;) 这种方式就是复制，把box中的样式赋值一份给box1
• .box1:extend(.box,.com){} 这种写法同时继承box和com的样式

条件判断

	.fun(@n,@m) when (@n>10) and (@m>10){
	  font-size: 80px;
	}

less 连接符

	.box4{
	  background: pink;
	  &.boxa{
	    font-size: 80px;
	  }
	  &:hover{
	    font-size: 20px;
	  }
	}