Vue-cli中如何安装并使用Less
这篇文章主要介绍了Vue-cli中如何安装并使用Less的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue-cli中如何安装并使用Less文章都会有所收获,下面我们一起来看看吧。
一、安装
我们可以在网络上找到很多有关于less
安装的相关资料也是比较简单的我们下载完成之后在vue项目中运行我们输入下面这串代码进行安装在vue
中:
npm install less less-loader --save-dev
我们可以在vue
项目中的package.json
中看到less
的相关依赖
接下来我们找到build目录下的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预处理语言,扩展lcss语言、增加变量、mixin、函数等特性、使得css更加易于维护和扩展。
1、语法变量
(1)、在less中,我们在写样式的时候需要给我们的元素加上背景颜色,在考虑之后我们会修改主题样式中我们可以使用下面这种方法:
@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这个内容。
(3)、通常我们在写css样式的时候会重复的写同样的类,其实我们可以这么做,代码如下:
.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
类然后在其他的class
中进行调用。这样我们还可以解决浮动父元素
的高度丢失问题。
2、面对携带参数时的混合使用方法:
(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);
3、模式匹配
我们通过根据传入的参数来改变混合的默认呈现,代码如下:
//让.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;}
4、引导表达式
(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 }
5、嵌套规则
嵌套的写法会让css看起来非常有层次感,易于浏览器解析
(1)、以嵌套的方式编写层叠样式,下面是相关的css的写法:
#header { color: black; }#header .navigation { font-size: 12px;}#header .logo { width: 300px; }#header .logo:hover { text-decoration: none;}
less代码写法:(2)&符号用于写串联选择器,而不是写后代选择器。这点对伪类尤其有用,如:hover和:focus
#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;}
6、运算
(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;
7、color函数
(1)、我们在less中可以知道它提供了一系列的颜色运算函数,如下所示:
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的颜色
8、math函数
在这个函数中less提供了很多大便利:
round(1.67); // returns `2`ceil(2.4); // returns `3`floor(2.6); // returns `2`percentage(0.5); // returns `50%`
9、作用域
对于作用域的话其实和js的作用域是相同的,会在当前作用域下面查找我们的变量,如果没有找到的话它会到上一级父元素中查找,如下所示:
@var: red;#page { @var: white; #header { color: @var; // white }}#footer { color: @var; // red }
10、注释方法
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 }
11、import方式
下面是我们的先关import
的案例:
@import "lib.less";@import "lib";
12、字符串插值
我们的变量可以用类似js
模板的字符串嵌入我们的字符中,如下所示:
@base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");
13、避免编译
我们有时候在输入错误的css
的时候或者使用一些less
不认识的语法我们在输出这样的值我们可以在字符串前面加上"~"
这个符号,从而避免编译的值用""这个符号包含起来,如下所示:
.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}
14、JavaScript表达式
(1)、JavaScript的表达式可以在 .less文件中进行使用,我们可以通过反引导的方式进行使用,如下所示:
@var: `"hello".toUpperCase() + '!'`; //@var: "HELLO!";
(2)、我们也可以同时使用字符串插值和避免编译,如下所示:
@str: "hello";@var: ~`"@{str}".toUpperCase() + '!'`; //@var: HELLO!;
(3)、也可以访问我们的JavaScript环境,如下所示:
@height: `document.body.clientHeight`;
(4)、我们还可以使用color函数来将JavaScript字符串解析成16进制的颜色值,代码如下:
@color: color(`window.colors.baseColor`);@darkcolor: darken(@color, 10%);
关于"Vue-cli中如何安装并使用Less"这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对"Vue-cli中如何安装并使用Less"知识都有一定的了解,大家如果还想学习更多知识,欢迎关注行业资讯频道。