• 安装Less


    之前毫无接触过Less,甚至都没听过。最近由于工作需要,花费一天时间学习Less,顺便写下这篇文章供初学者学习,希望你能通过这篇文章对Less有个基本的了解。

    Less 是用 JavaScript 写的,所以需要额外的 Node.js 或者网页浏览器才能够运行它。你可以在你的网站中引入 less.js ,这样在真正的运行环境下它就可以自动编译,但这个过程非常缓慢,所以不建议这么使用。 推荐的方式是提前编译成 CSS 代码并且将一个正常的发展版本备份在线上。当然还有很多可视化的的程序帮助你编译 less 文件,但是在本篇文章中我们将使用 node.js

    安装LESS

    第一步:我们需要NodeJS运行LESS示例。 要下载NodeJS,请打开链接 https://nodejs.org/en/ 如下图:

    下载最新版本。

    第二步:运行安装程序以在系统上安装 Node.js 。安装成功后会看到下图:

    第三步:通过NPM(节点程序包管理器)在服务器上安装LESS。 打开命令框在命令提示符下运行以下命令。

    npm install -g less

    初始化成功后,命令提示框会有类似下面的字符提示(比一定一样,版本之间不同,类似是这样的):

    `-- less@2.6.1
      +-- errno@0.1.4
      | `-- prr@0.0.0
      +-- graceful-fs@4.1.3
      +-- image-size@0.4.0
      | +-- oauth-sign@0.8.1
      | +-- qs@6.0.2
      | +-- stringstream@0.0.5
      | +-- tough-cookie@2.2.2
      | `-- tunnel-agent@0.4.2
      `-- source-map@0.5.3

    到这Less就已经安装完成了,接下来演示一个demo,就是如何将.less文件转成.css文件:

    首先随便建一个html页面

    <!doctype html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css" />    //注意到没有,这里引用的style.css文件
    </head>
    <body>
        <h1>欢迎来到.Net_海博客园</h1>
        <h3>QQ:1538494554</h3>
    </body>
    </html>

    其次再建一个style.less文件:

    @primarycolor: #FF7F50;
    @color:#800080;
    h1{
    color: @primarycolor;
    }
    h3{
    color: @color;
    }

    好了 到了这有非常重要的一点一定要注意到,那就是在建这个html文件和.less文件的时候一定要建在这个路劲下面,要不然找不到文件就会转换失败。(打开命令窗口就能看到这个路劲)

    第四步:万事俱备只欠东风,那就是两者之间转换。打开命令框,输入下面命令即可:

    lessc style.less style.css

     OK ,去你这个路劲里面看看 是不是多了一个.css文件呢,现在再把刚才那个html运行起来看看有没有效果。

    下一篇将介绍关于Less的一些常用知识点。

  • 相关阅读:
    forEach 不能跳出循环;用some 或者every 代替
    echarts图表不重新渲染
    vue 的el-tree获取选中节点的集合执行多次问题
    vue 2.6版本 手动配置json文件显示隐藏
    echart category series 数据多个 长度不对应 对应的数据一定要用字符串 不要用数字
    nginx前端配置后端
    UCOS多任务下有效的喂狗的方式
    判断数据类型
    PDFJS插件带添加header以及携带授权
    vue中控制浏览器前进和后退
  • 原文地址:https://www.cnblogs.com/bin521/p/8405339.html
Copyright © 2020-2023  润新知