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文件了

  • 相关阅读:
    【5】TensorFlow光速入门-图片分类完整代码
    【4】TensorFlow光速入门-保存模型及加载模型并使用
    科研数据库结构
    高并发请求的缓存设计策略
    iOS-KVC的原理
    iOS-KVO的原理
    Kafka too many open files问题解决
    VLOOKUP函数-Excel
    arcgis sql 字符串替换
    ArcGIS矢量转栅格再发布切片服务,还是直接发布切片服务?有何区别?
  • 原文地址:https://www.cnblogs.com/amiezhang/p/less.html
Copyright © 2011-2022 走看看