如何引用less文件

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

去 less开源地址（https://github.com/less/less.js/archive/master.zip） 下载less.js文件，然后引入该文件。

1

<script src="less.js" type="text/javascript"></script>

也可以直接使用CDN的方式引用less.js

1

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

4、在引用less.js之前，需要一个less变量，声明编译less的环境参数，所以最终所有引用文件如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<link rel="stylesheet/less" type="text/css" href="less.less" />

    <script type="text/javascript">

    less = {

        env: "development",

        async: false,

        fileAsync: false,

        poll: 1000,

        functions: {},

        dumpLineNumbers: "comments",

        relativeUrls: false,

        rootpath: ":/a.com/"

    };

    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

注：less变量的声明必须要在less.js的引用之前

接下来就可以了 , 编辑less文件后就可以直接显示在页面中了 ,

打开网页我们按下F12就会发现 , 头部 head 标签内多了一个 style 标签 ; 标签内就是你所写的less内容

a83f3d42da6d56c55e53c23e4e3107a.png

less编译成css的编译工具使用方法

less生成css的工具：Koala（http://koala-app.com/）。首先去官网下载安装文件，安装运行之后得到如下界面：

991fc8222ccbedaafea34e98119a659.png

然后将less所在的目录拖到界面中间，点击Compile按钮。将会在less.less的同级目录下生成一个less.css文件，然后直接引用这个css文件即可（在less.less中编写代码会自动在less.css文件中编译出css代码）

以上就是如何引用less文件的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

如何引用Less文件

Less百行代码实现bootstrap栅格布局

css的sass样式应该怎么使用

css预处理器之Less详解

css3和Less的区别是什么

在vue中使用compass

sass和Less之间的区别是什么

Less是什么

Less和css的区别是什么

手机端怎样用rem+scss做适配

更多相关阅读请进入《Less》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...