文章: 阅读:

Less 基础知识

CSSLess

前言

1、Less



  • Less（Leaner Style Sheets 的缩写）是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护和扩展、方便制作主题、扩充。

  • Less 可以运行在 Node、浏览器和 Rhino 平台上。

  • Less 文件后缀为 .less。

2、安装

2.1 在命令行中使用 Less

  • 在服务器端最容易的安装方式就是通过 npm，方法如下。

    1
    $ npm install -g less

  • 安装完成后可以查看版本：

    1
    2
    3
    $ lessc --version

    lessc 4.1.1 (Less Compiler) [JavaScript]

  • 注：国内 npm 建议使用淘宝镜像来安装，参考：NPM 国内慢的问题解决。

2.2 在浏览器环境中使用 Less

2.2.1 使用 CDN

  • 在 HTML 页面的 <head> 部分中添加以下行。

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

2.2.2 直接下载到本地

2.3.3 通过 Bower 安装

  • 通过 Bower 安装 Less.js 项目，可以使用以下命令：

    1
    $ bower install less

3、使用

  • Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。

3.1 命令行用法

  • 安装 Less 后，就可以在命令行上调用 Less 编译器了。

  • 创建一个 .less 文件，文件代码如下。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @base: #f938ab;

    .box-shadow(@style, @c) when (iscolor(@c)) {
      -webkit-box-shadow: @style @c;
      box-shadow:         @style @c;
    }
    .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
      .box-shadow(@style, rgba(0, 0, 0, @alpha));
    }
    .box {
      color: saturate(@base, 5%);
      border-color: lighten(@base, 30%);
      div { .box-shadow(0 0 5px, 30%) }
    }

  • 在命令行输入下面命令，即将 .less 文件转化的 css 代码。

    1
    $ lessc test.less
    1
    2
    3
    4
    5
    6
    7
    8
    .box {
      color: #fe33ac;
      border-color: #fdcdea;
    }
    .box div {
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

  • 可以在后面再跟一个 .css 文件名，将代码保存到文件中。这时会在当前目录下生存 test.css 文件，代码如下。

    1
    2
    3
    4
    5
    $ lessc test.less test.css

    或

    $ lessc test.less > test.css
    1
    2
    3
    4
    5
    6
    7
    8
    .box {
      color: #fe33ac;
      border-color: #fdcdea;
    }
    .box div {
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

  • 若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。

  • 执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。

3.2 代码中用法

  • 可以像下面这样在代码中调用 Less 编译器（Node 平台）。

    1
    2
    3
    4
    5
    var less = require('less');

    less.render('.class { width: (1 + 1) }', function (e, css) {
      console.log(css);
    });

  • 输出结果为：

    1
    2
    3
    .class {
      width: 2;
    }

  • 还可以手动调用分析器（paser）和编译器：

    1
    2
    3
    4
    5
    6
    7
    8
    var parser = new(less.Parser);

    parser.parse('.class { width: (1 + 1) }', function (err, tree) {
      if (err) {
        return console.error(err)
      }
      console.log(tree.toCSS());
    });

3.3 配置

  • 可以给编译器传递多个参数：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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 { width: (1 + 1) }', function (e, tree) {
      tree.toCSS({
        // Minify CSS output
        compress: true
      });
    });

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-08 20:01


评论


文章目录
  1. 1. 前言
  2. 2. 1、Less
  3. 3. 2、安装
    1. 3.1. 2.1 在命令行中使用 Less
    2. 3.2. 2.2 在浏览器环境中使用 Less
      1. 3.2.1. 2.2.1 使用 CDN
      2. 3.2.2. 2.2.2 直接下载到本地
      3. 3.2.3. 2.3.3 通过 Bower 安装
  4. 4. 3、使用
    1. 4.1. 3.1 命令行用法
    2. 4.2. 3.2 代码中用法
    3. 4.3. 3.3 配置
隐藏目录