一文读懂less语法以及基于nodejs编译less文件

乐之者java

于 2020-05-28 10:50:31 发布

阅读量598

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106392787

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

在less出来之前，成千上万行的css代码是臃肿的、难于维护的，举个直观的例子，你的项目中可能有很多字体的颜色都设置成了color:#123456,当你的css比较多的时候，你不可避免的在多个地方写了同样的color:#123456,当需要修改的时候，你不得不一处处去搜寻然后执行替换，这些时间是不应该被浪费的，less的出现解决了这个问题以及其他的问题，less是通过自己特定的语法来书写less代码，less代码最终被转化为css代码。

less具有如下主要特性：

less里面可以定义变量

Mixins混入特性，可以让你不止一次的重用已有样式

less支持函数

less支持四则运算

如何使用less？

less有两种使用方式：

一种是通过nodejs把less文件编译为css文件，在需要使用的页面引入编译好的css即可。

一种是如果你没有nodejs，只想通过浏览器直接打开页面，也可以在普通的页面中直接引入编写好的less文件，但是需要额外引入一个编译less文件的js，叫做less.js，网上自己搜下下载吧，当然你也可以去GitHub上（https://github.com/less/less.js/）自己下载。

先介绍第二种的使用方法，下面再介绍基于nodejs编译的方式，在生产中，不建议使用第二种方式，因为js编译less文件毕竟需要时间，会影响用户的体验。

html页面引入less文件和less.js,写点内容进去，我们在less.less这个less文件中使用less语法来书写css：

<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="utf-8">
    <link  href="<%=request.getContextPath()%>/rs/css/less.less" rel="stylesheet/less" type="text/css">
    <title>less写css</title>
    <script src="<%=request.getContextPath()%>/rs/less/less.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <span>第一个span</span>
        <p>第二个是段落</p>
        <a>第三个是超链接</a>
        <h2>第四个是h2</h2>
        <h5>第五个是h5标签</h5>
        <h1>第六个是h1</h1>
    </div>
</body>
</html>

我们看看less.less文件：

@charset "utf-8";
/*一、less变量的使用：@变量名:变量值。变量作用域：先找局部，再找全局*/
@color: #4D926F;
@border-color : #b5bcc7;
p {
  @color:red;
  color: @color;
}
div {
  span{/*less嵌套的规则：相当于div span*/
    color: @color;/*使用全局的*/
  }
}
h2 {
  color: @color;
}
p,div{
  border : 1px solid @border-color;
}

/*二、less里面函数的使用：无参函数和有参函数都可以*/
/*无参数形式
.fontSize50{
  font-size:50px;
}

div {
    span{
      .fontSize50;//混入(mixins)特性：编译后展开
    };
}
*/
//有参数形式:50px表示默认值,有默认值可以不必传参直接以“.fontSize50;”形式调用
#zdw_namespace{//声明了一个命名空间，防止类名重复
  .fontSize50(@size:50px){
    font-size:@size;
  }
}
div {
  span{
    #zdw_namespace>.fontSize50(80px);//使用方法：[命名空间>]选择器
  };
}

/*三、less其他特性*/
//arguments:表示所有参数
.boxshadow(@h:3px,@v:3px,@blur:3px,@color:#888888){
  box-shadow: @arguments;
}
div a{
   .boxshadow(3px,3px,3px,red);
}
/*&的使用*/
div {
  a{
    &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素,此处即 a:hover
      color: royalblue;
      text-decoration: underline;
    }
  }
}
/*四、less的四则运算及预定义函数*/
@init: #111111;
@transition: @init*2;//四则运算是less的特性
.switchColor {
  background-color: @transition;
  color: #fff;
}
h5{
  .switchColor;
}
@init2:#111111;
h1{
  background-color:fadein(@init2,100%);
  color: #fff;
}

其中fadein是less里面预定义的函数，类似的还有：

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color
 darken(@color, 10%); // return a color which is 10% *darker* than @color
 saturate(@color, 10%); // return a color 10% *more* saturated than @color
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color
 fadein(@color, 10%); // return a color 10% *less* transparent than @color
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

在上面的less.less这个文件中，我分四部分基本展示了less的特性，让你知道了less是个什么玩意，不再是一头雾水，其他的就靠你自己多努力了。

打开浏览器，查看网页效果：

可以看到less文件已经生效了。

基于nodejs编译写好的less文件为css文件

上边介绍了less，并使用引入less.min.js的方式直接在浏览器中编译less文件，我也说了，我并不推荐这种做法，因为它会加大浏览器的负荷，让你的网页打开、渲染消耗不必要的时间，要想解决这个问题，就需要使用nodejs安装less，然后使用安装的less编译你自己的less文件，最终产出css文件，而你自己的网页只需要引入css文件就可以了。

一、分别在全局和当前项目安装下less：

D:\zhao\nodews>npm install -g less
D:\zhao\nodews>npm install --save-dev less

二、编写一个less文件，就使用上面的less.less文件吧，复制到D:\zhao\nodews目录

D:\zhao\nodews>lessc less.less less_generate.css

查看目录：

生成成功了。

三、修改上面的页面，使其引入less_generate.css：

<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="utf-8">
    <link  href="<%=request.getContextPath()%>/rs/css/less_generate.css"  rel="stylesheet">
    <title>less写css</title>
</head>
<body>
    <div>
        <span>第一个span</span>
        <p>第二个是段落</p>
        <a>第三个是超链接</a>
        <h2>第四个是h2</h2>
        <h5>第五个是h5标签</h5>
        <h1>第六个是h1</h1>
    </div>
</body>
</html>

当然less.min.js自然不需要再引入了。

注意：<link href="<%=request.getContextPath()%>/rs/css/less_generate.css" rel="stylesheet/less" type="text/css">需要修改为

四、查看页面效果是否有变化呢？

跟之前的对比一下，效果完全一样。

附录，编译前的less.less和编译后的less_generate.css内容对比：

less.less less_generate.css

@charset "utf-8";
/*一、less变量的使用：@变量名:变量值。变量作用域：先找局部，再找全局*/
@color: #4D926F;
@border-color : #b5bcc7;
p {
  @color:red;
  color: @color;
}
div {
  span{/*less嵌套的规则：相当于div span*/
    color: @color;/*使用全局的*/
  }
}
h2 {
  color: @color;
}
p,div{
  border : 1px solid @border-color;
}

/*二、less里面函数的使用：无参函数和有参函数都可以*/
/*无参数形式
.fontSize50{
  font-size:50px;
}

div {
    span{
      .fontSize50;//混入(mixins)特性：编译后展开
    };
}
*/
//有参数形式:50px表示默认值,有默认值可以不必传参直接以“.fontSize50;”形式调用
#zdw_namespace{//声明了一个命名空间，防止类名重复
  .fontSize50(@size:50px){
    font-size:@size;
  }
}
div {
  span{
    #zdw_namespace>.fontSize50(80px);//使用方法：[命名空间>]选择器
  };
}

/*三、less其他特性*/
//arguments:表示所有参数
.boxshadow(@h:3px,@v:3px,@blur:3px,@color:#888888){
  box-shadow: @arguments;
}
div a{
   .boxshadow(3px,3px,3px,red);
}
/*&的使用*/
div {
  a{
    &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素,此处即 a:hover
      color: royalblue;
      text-decoration: underline;
    }
  }
}
/*四、less的四则运算及预定义函数*/
@init: #111111;
@transition: @init*2;//四则运算是less的特性
.switchColor {
  background-color: @transition;
  color: #fff;
}
h5{
  .switchColor;
}
@init2:#111111;
h1{
  background-color:fadein(@init2,100%);
  color: #fff;
}

@charset "utf-8";
/*一、less变量的使用：@变量名:变量值。变量作用域：先找局部，再找全局*/
p {
  color: red;
}
div span {
  /*less嵌套的规则：相当于div span*/
  color: #4D926F;
  /*使用全局的*/
}
h2 {
  color: #4D926F;
}
p,
div {
  border: 1px solid #b5bcc7;
}
/*二、less里面函数的使用：无参函数和有参函数都可以*/
/*无参数形式
.fontSize50{
  font-size:50px;
}

div {
    span{
      .fontSize50;//混入(mixins)特性：编译后展开
    };
}
*/
div span {
  font-size: 80px;
}
/*三、less其他特性*/
div a {
  box-shadow: 3px 3px 3px red;
}
/*&的使用*/
div a:hover {
  color: royalblue;
  text-decoration: underline;
}
/*四、less的四则运算及预定义函数*/
.switchColor {
  background-color: #222222;
  color: #fff;
}
h5 {
  background-color: #222222;
  color: #fff;
}
h1 {
  background-color: #111111;
  color: #fff;
}

乐之者java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一文读懂less语法以及基于nodejs编译less文件

在less出来之前，成千上万行的css代码是臃肿的、难于维护的，举个直观的例子，你的项目中可能有很多字体的颜色都设置成了color:#123456,当你的css比较多的时候，你不可避免的在多个地方写了同样的color:#123456,当需要修改的时候，你不得不一处处去搜寻然后执行替换，这些时间是不应该被浪费的，less的出现解决了这个问题以及其他的问题，less是通过自己特定的语法来书写less代码，less代码最终被转化为css代码。less具有如下主要特性：less里面可以定义...
复制链接

扫一扫