less的使用
1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本号显示不出来 npm i less -g 全局安装一下less
4、在main.js import less from 'less' Vue.use(less) 作用：在所有页面都可以使用less预编译css语言
5、独立的vue文件需要引入less <style lang="less"></style>
引入less的两种形式
第一种方式 使用导入式 引入样式库
<style scoped lang="less">
@import url(./less/common.less);
</style>
第二种引入方式 在script中导入样式
import './less/common.less'
less中变量的使用 定义方式：
@key:value; 使用方式：@key;
字符串拼接变量使用方式
@img:'./img/';
background:url("@{img}1.png") url里面必须要使用引号(单双引号都可以)
多层嵌套+变量计算；
写减法的时候左右要加空格，否则会理解为杠-
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<style lang="less">
@k:100px;
.box1{
width: @k*2;
height:@k*2;
background: red;
.box2{
width: @k - 5px;
height:@k + 5px;
background: green;
.box3{
width: @k/2;
height:@k/2;
background: blue;
}
}
}
</style>
定义一个函数；
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.box1{
// 不传参，使用默认的；
.test()
}
.box2{
// 给函数传参；
.test(@color:green,@size:30px)
}
