zoukankan      html  css  js  c++  java
  • less的使用

    1.浏览器直接使用——最简单的用法(不推荐使用,性能差)

    引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

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

    然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:

    <script src="less.js" type="text/javascript"></script> //或者官方CDN加速的<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

    注意你的less样式文件一定要在引入less.js前先引入。

    请在服务器环境下使用!本地直接打开可能会报错!(用Firefox可以不依赖服务器)

    可以看到Chrome会报出这个错误,本地直接打开而不依赖服务器软件话是不能用http协议的,自然XHR就不能工作了。less.js就是利用XHR来请求less文件里的源码的。

    2.在服务器端使用

    2.1命令行下编译less文件

    在全局安装less

    $ npm install -g less

    之后可以在cmd里面直接使用less编译了

    2.2直接在命令行下编译字符串less代码

    var less = require('less');
    
    less.render('.class {  1 + 1 }', function (e, css) {
        console.log(css);
    });

    输出

    .class {
      width: 2;
    }

    调用解析器把字符串less代码输出到文件

    var parser = new(less.Parser)({
        paths: ['.', './lib'], // Specify search paths for @import directives
        filename: 'style.less' // Specify a filename, for better error messages
    });
    
    parser.parse('.class {  1 + 1 }', function (e, tree) {
        tree.toCSS({ compress: true }); // Minify CSS output
    });

    3.推荐一个开源的预处理语言图形编译工具——Koala

    使用极其简单只要下载安装后,把项目拖入软件内选择less文件,按“Compile”就可以在同一个目录下生成css文件了

  • 相关阅读:
    virtual
    微软MBS intern笔试
    Ubuntu Linux Green hand
    Coding style
    abstract
    Jquery Ajax请求标准格式
    Hashtable的简单实用
    C#中GET和POST的简单区别
    WIN7 64位机与32位机有什么区别
    一个加密解密类
  • 原文地址:https://www.cnblogs.com/amiezhang/p/less.html
Copyright © 2011-2022 走看看