-stylelang=-less--关于less的知识点

时间：2023-03-28 11:57:37 HTML

5.使用less允许以变量的形式定义，定义：@x:xx;使用：@x;@color:red;@x:100px;.home{宽度：@x;身高：@x；背景颜色;}1.下载依赖的less和less-loader或者创建项目时选择npminstallless@3.9.0-gnpminstallless-loader@4.1.0-g方法npmuninstallless2.查看lessc-v3是否安装成功。成功4.引用5.使用less允许以变量的形式定义，定义：@x:xx;使用：@x;@color:red;@x:100px;.home{宽度：@x;身高：@x；背景颜色;}效果：多层嵌套+变量计算@x:120px;.home{宽度：@x;身高：@x；背景：红色；.box1{宽度：@x/2;高度：@x/2；背景：绿色；.box2{宽度：@x/3;高度：@x/3；背景：蓝色；ty:le=function}>}template>

我是box1

我是box2

我是box3

//定义一个函数；.test(@color:red,@size:14px){背景：@color;font-size:@size;}//无传参，使用默认；.box1{.test()}//传递参数给函数；.box2{.test(@color:green,@size:30px)}//修改一个参数.box3{.test(@color:#46ff17)}效果：可以计算出高度、宽度和角度<模板>

@k:20px;ul{列表样式：无；li{border:1pxsolid;:nth-child(1){宽度：@k;身高：@k；}}li:nth-child(2){宽度：@k+@k;身高：@k；thn-}childld({宽度：@k*2;高度：@k;}效果：