Vue-cli 中安装并使用less

Posted 2021-03-24 koaler

首先安装vue-cli，网站教程多多，在这不多说。
接下来在vue项目目录下，运行

其他扩展使用方法我放个官网链接，大家可以点击查看

npm install less less-loader --save-dev
等待安装成功即可，接下里我们可以在vue项目中的package.json中看到less的相关依赖

接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下

{
test: /.less$/,
loader: "style-loader!css-loader!less-loader"
}
如果没有module和rules就可以自己加上（一般都是有的，没有说明你可以安装错误vue-cli或者找错文件）

module: {
rules: [
{
test: /.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
},
以上步骤全部走完，接下来，

我们可以打开组件文件在下面style标签里面写上lang="less"表示以less语法解析css，

大家接下来可以跟着我学习完less基础语法进行实验

less语法介绍
介绍less是什么

Less是一门css预处理语言，它扩展了css语言，革命了css，增加了变量、mixin、函数等特性、使得css更加易于维护和扩展。Less的好处和优点，接下来我会用代码实现。

语法
变量

（1）在less里面，我们在写样式的时候，需要给元素加上背景颜色。考虑到以后会修改主题样式，我们就可以使用变量来很方便的修改background-color。

@tabBar-red-style:#f00
#tabBar{
background:@tabBar-red-style
}
在页面上id为tabBar的元素的背景就会被显示为#f00，会被正常的渲染出来，以后倘若变态的产品经理想要全局改变颜色风格，就可以只改变移除变量即可全局修改。

（2）变量还可以使用变量名定义变量，例如

@message: "this is a string";
@text: ‘message‘;
content: @@text;
在content这个属性后面就是this is a string这个内容

混合

我们通常在写css的时候会重复写好多同样的类，比如text-align：center，margin：0 auto，之类的css，现在我们可以定义一个class然后在其他class里面去调用，例如

.col-row-center{
dispaly:flex;
align-items:center;
justify-content:center;
}
.message{
.col-row-center
}
//等同于
.message{
dispaly:flex;
align-items:center;
justify-content:center;
}
同样可以被解析成功，比如解决浮动父元素高度丢失，一个元素的水平垂直居中都可以用一个公共的class来引用。

携带参数的混合使用

混合如果只能这么单一的使用实在是简单，在混合里面我们可以像函数一样携带参数传值使用，例如

（1）带一个参数

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#tabBar{
.border-radius(4px);//使用时可以在括号内写入想要的值
}
.card{
.border-radius(6px);
}
（2）给参数设定默认值

.border-radius (@radius:4px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#tabBar{
.border-radius();//此时不传值也会有默认值传入
}
.card{
.border-radius();
}
（3）不写参数防止隐藏css

.border-radius () {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#tabBar{
.border-radius();//此时不传值在解析过程中，.border-radius类不会出现在css文件之中，节省css空间
}
.card{
.border-radius();
}
（4）@arguments大量传参，节省操作

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
模式匹配

根据传入的参数来改变混合的默认呈现，例如

//让.mixin根据不同的@switch值而表现各异
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}

//运行
@switch: light;

.class {
.mixin(@switch, #888);
}
上面代码意思是使用.mixin时，@switch位置上的值是dark那就应用第一个.mixin，如果是light那就应用第二哥.mixin，第三个@_是接受一切值得配对，第三个可以一直被使用。css文件中看到的内容应该就是

.class {
color: #a2a2a2;
display: block;
}
引导表达式

（1）根据表达式进行匹配，而非根据值和参数匹配

//when关键字用以定义一个导引序列(此例只有一个导引)
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}

//运行
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
这里面就会进行一些列的运算对比从而选择正确的类

（2）导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，除去关键字true以外的值都被视示布尔假

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
（3）导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功

.mixin (@a) when (@a > 10), (@a < -10) { ... }
（4）导引可以无参数，也可以对参数进行比较运算

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
嵌套规则

嵌套的写法会让css看起来非常有层次感，易于浏览器解析

（1）以嵌套的方式编写层叠样式

css的写法

#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
less的写法

#header {
color: black;

.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
（2）&符号用于写串联选择器，而不是写后代选择器。这点对伪类尤其有用，如:hover和:focus

.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
解析出来如下

.bordered.float {//中间没有空格
float: left;
}
.bordered .top {//中间有空格
margin: 5px;
}
运算

less中的运算也会非常实用

（1）任何数字、颜色或者变量都可以参与运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
（2）less运算能够分辨出颜色和单位

@var: 1px + 5; //less会输出6px

//括号也同样允许使用
width: (@var + 5) * 2;

//可以在复合属性中进行运算
border: (@width * 2) solid black;
Color 函数

（1）less提供了一系列的颜色运算函数. 颜色会先被转化成 HSL色彩空间, 然后在通道级别操作

lighten(@color, 10%); // 返回一个比@color低10％更轻的颜色

darken(@color, 10%); // 返回一个比@color高10％较暗的颜色

saturate(@color, 10%); // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%); // 返回一个比@color少饱和度10％的颜色

fadein(@color, 10%); // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%); // 返回一个比@color多10％透明度的颜色
fade(@color, 50%); // 返回一个颜色透明度为50％的颜色

spin(@color, 10); // 返回色调比@color大10度的颜色

spin(@color, -10); // 返回一个比@color小10度色调的颜色

mix(@color1, @color2); // 返回一个混合@ color1和@ color2的颜色
Math函数

less提供的数学函数可以方便的为一些需求提供便利

round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
percentage(0.5); // returns `50%`
作用域

和js的作用域相同，会在当前作用域下查找变量，如果没有，会到上级父元素茶找

@var: red;

#page {
@var: white;
#header {
color: @var; // white
}
}

#footer {
color: @var; // red
}
注释

less里面的注释沿用了css的舒适，包括js的注释也可以使用

/* Hello, I‘m a CSS-style comment */
.class {
color: black
}

// Hi, I‘m a silent comment, I won‘t show up in your CSS
.class {
color: white
}
import

当你拥有一个common.less里面存储着大量复用class，可以使用import来引入文件使用

@import "lib.less";
@import "lib";
字符串插值

变量可以用类似js模板字符串方式嵌入到字符串中

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个 ~，并将要避免编译的值用 “”包含起来

.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
javascript表达式

（1）JavaScript 表达式也可以在.less 文件中使用.，可以通过反引号的方式使用

@var: `"hello".toUpperCase() + ‘!‘`; //@var: "HELLO!";
（2）也可以同时使用字符串插值和避免编译

@str: "hello";
@var: ~`"@{str}".toUpperCase() + ‘!‘`; //@var: HELLO!;
（3）也可以访问JavaScript环境

@height: `document.body.clientHeight`;
（4）将一个JavaScript字符串解析成16进制的颜色值，可以使用 color 函数

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
本人也只是从官网和boot网站学习和摘录，供自己记忆加深方便以后查阅。如有不全及错误，请自行查阅和评论通知修改