当前位置: 首页>后端>正文

less 取其他文件的样式 less文件怎么用

 

直接在浏览器端使用

 


 

第一步,引入 .less 文件(注意要将 rel 属性设置为“stylesheet/less”)



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



第二步,引入Less.js文件



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



 

需要特别注意的是:

1).less 样式文件一定要在 Less.js之前引入,这样才能保证 .less 文件被正确编译。

2)由于浏览器端使用Less时,是使用 ajax 来拉取 .less 文件,如果直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下,会拉取不到 .less 文件,导致样式无法生效。因此,必须在http(s)协议下使用,即必须在服务器环境下使用。

3)还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取 .less文件。解决方案是,在服务器中为 .less 文件配置MIME值为 text/css。一种更简单的方法,就是直接将 .less 文件改名为 .css 文件即可。

在开发阶段,在页面中嵌入一个 Less.js 将Less在线编译成CSS样式,确实很方便。但是,在线编译会产生加载延迟,即便在浏览器中有不足一秒的加载延迟,也会降低性能。如果Javascrip执行错误,还会引起美观问题。因此,在生产环境中,并不推荐这种方式,而是推荐在服务器端使用Less。


我在直接使用浏览器引用的时候,出现了第二种情况的错误,一直没找到解决方案。

再考虑到实际运用性,故采用在服务器端使用的方式。

 

在服务器端Node.JS中使用


 1. 安装Less编译器

为了方便使用 Lessc 这个全局命令,建议采用全局安装。安装命令如下:



$ npm install Less -g



如果想安装指定版本,也非常方便,只需在安装包后添加 @VERSION即可。如,安装1.6.2版本的命令如下:



$ npm install Less@1.6.2 -g



当然,如果你想安装最新版本,可以尝试以下命令:



$ npm install Less@latest -g



2. 编译less文件并输出标准格式的css文件



$ lessc styles.less styles.css



注:要输出最小化的CSS可以使用clean-css插件。当插件安装时,用-clean css选项指定一个缩小的css输出:



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



 

代码中用法

 

只要安装了 Less,就可以在Node中像这样调用编译器:



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



经过编译生成的 CSS 代码为:



.class {
  width: 2;
}



你也可以手动调用解析器和编译器:



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



 



https://www.xamrdz.com/backend/3hy1961551.html

相关文章: