vue2中less的安装以及使用教程
m0_63466615 人气:01.安装
1.1 在vue cli2 使用vue init webpack xxx 创建的项目
webpack安装要考虑less-loader的兼容问题，
npm install less-loader@7.0.0
如果7.0.0不行，就一步一步下探，6.0.0 5.0.0
安装less-loader成功后，
npm install --save less
安装less
在webpack.base.config.js的rules里添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
在.vue文件的style区，加上lang='less'
1.2 在vue cli3中（vue create xxx）
npm install less-loader -- save-dev
npm install less --save-dev
在.vue文件的style区，加上lang='less'
2.使用
2.1定义变量
@width: 500px; @height: @width+10px; @red: #f00; @transparent: 0.5; @radius: 30px;
注意变量也可以引用变量
2.2 在属性中使用变量
#app {
width: @width;
height: @height;
background-color: @red;
}
2.3混合（Mixin）
.border() {
border-radius: @radius;
border-color: @red;
}
.colors() {
primary: #3385ff;
secondary: green;
}
#app {
width: @width;
height: @height;
background-color: @red;
.border();
}编译出来就是
#app {
width: 500px;
height: 510px;
background-color: #f00;
border-radius: 30px;
border-color: #f00;
}
2.4在引用变量时，做一些运算
.inner-app {
width: @width / 2;
height: @height / 2;
background-color: #00f;
}
编译出来是
.inner-app {
width: 500px / 2;
height: 510px / 2;
background-color: #00f;
}
2.5可以以属性名作为变量
.app2 {
@width: 200px;
width: @width;
height: $width;
background-color: .colors[secondary]; // .colors在上边Mixin里定义的
}
编译出来是
.app2 {
width: 200px;
height: 200px;
background-color: green;
}
2.6引用父元素以及祖先元素（&）
#app {
width: @width;
height: @height;
background-color: @red;
&:hover {
opacity: @transparent;
&::after {
content: "anc";
}
&::before {
content: "xyt";
}
}
}
编译出来是
#app:hover {
opacity: 0.5;
}
#app:hover::after {
content: "anc";
}
#app:hover::before {
content: "xyt";
}
注意 &引用的是所有父元素和祖先元素
总结
加载全部内容