Less Basic Learning

Less Basic Learning

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

安装

命令行使用npm全局安装:

$ npm install -g less

命令行使用方法

安装以后,可以在命令行调用预编译器:

$ lessc styles.less

这样将会把编译的CSS输出为stdout。为了存储CSS结果可以使用:

$ lessc styles.less styles.css

clean-css 插件可以压缩输出结果,安装插件后,可以使用–clean-css选项

$ lessc --clean-css styles.less styles.min.css

更多使用方法:

http://lesscss.cn/usage/index.html

代码用法

可以从node调用预编译器

var less = require('less');

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

});

将会输出为

.class { width: 2; }

配置

可以传递一些选项给预编译器

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

浏览器端用法

客户端是最简单的入门方法,有助于用较少的资源进行开发,但在生产中,当性能和可靠性很重要时,建议使用node.js或许多可用的第三方工具之一进行预编译。

首先,将rel属性设置为“stylesheet/less”的.less样式表链接起来:

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

然后下载less.js,将其包含在script标签内:

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

选项是在这个script之前设定的:

<script> less = {

env: "development",

async: false,

fileAsync: false,

poll: 1000,

functions: {},

dumpLineNumbers: "comments",

relativeUrls: false,

rootpath: ":/a.com/" };

</script>

<script src="less.js"></script>

为了简便,也可以在script或者Link tags上设置为属性:

<script src="less.js" data-poll="1000" data-relative-urls="false"></script> <link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

发布了7 篇原创文章 · 获赞 3 · 访问量 170

猜你喜欢

转载自blog.csdn.net/qq_43026479/article/details/103109395