less简单学习 | 刘民锴的个人博客

学习笔记

发布日期: 2020-12-09

更新日期: 2020-12-19

文章字数: 519

阅读时长: 2 分

阅读次数:

一、简介.

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

中文官网：https://less.bootcss.com/

二、简单入门.

1、下载安装.

①使用npm安装.

前提：安装了node

npm install -g less

安装成功

②地址下载.

https://github.com/less/less.js/archive/v2.5.3.zip

③cdn.

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

2、简单使用.

三种用法

style.less文件内容

@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文件.

lessc styles.less

编译后，(stdout) 打印编译后的css内容，不会输出文件

# 打印结果
C:\Users\14239\Desktop\新Hadoop\pandownload\Vue\Less>lessc style.less

.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);
}

编译并输出文件.

# lessc  less文件  css输出文件
lessc style.less styles.css

编译结果

压缩文件.

编译并压缩文件

# 安装 clean-css 插件
npm install less-plugin-clean-css

# 编译，并压缩
lessc --clean-css  style.less  style.min.css

若提示如下

Unable to load plugin clean-css please make sure that it is installed under or at the same level as less

降低版本即可

npm install less@1.6.2 -g

②代码用法.

var less = require('less');

less.render('.class { width: (1 + 1) }',
    {
      paths: ['.', './lib'],  // Specify search paths for @import directives
      filename: 'style.less', // Specify a filename, for better error messages
      compress: true          // Minify CSS output
    },
    function (e, output) {
       console.log(output.css);
    });

③浏览器用法.

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

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js" type="text/javascript"></script>

Make sure you include your stylesheets before the script.
When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
Due to the same origin policy of browsers loading external resources requires enabling CORS