less入门

最新推荐文章于 2022-07-07 15:58:29 发布

邱新磊

最新推荐文章于 2022-07-07 15:58:29 发布

阅读量147

点赞数

分类专栏： Web前端文章标签： less快速入门

本文链接：https://blog.csdn.net/xuzailin/article/details/81205187

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

less网站地址: http://lesscss.cn
快速入门
   Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。
   更少可以运行在Node或浏览器端。
   例：

@nice-blue: #5B83AD; 
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

输出：

#header { color: #6c94be; }

使用方法

   可以通过npm在命令行上使用Less，作为浏览器的脚本文件下载或在各种第三方工具中使用。有关更多详细信息，请参阅“ 用法”部分

   安装

       在服务器上安装Less的最简单方法是通过npm， node.js包管理器，如下所示：

npm install -g less

命令行用法
       安装后，您可以从命令行调用编译器，如下所示：
       $ lessc styles.less
       这将输出编译的CSS stdout。要将CSS结果保存到您选择的文件，请使用：
       $ lessc styles.less styles.css
       要输出缩小，您可以使用CSS clean-css插件。安装插件后，使用--clean-css选项指定缩小的CSS输出：
       $ lessc --clean-css styles.less styles.min.css
       要查看所有lessc不带参数的命令行选项，请参阅用法。
   代码用法
       您可以从节点调用编译器，如下所示：
       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);    
});

有关更多信息，请参阅用法
   浏览器端用法
       在浏览器中使用less.js非常适合开发，但不建议用于生产
       客户端是最简单的入门方式，适合用Less开发，但在生产中，当性能和可靠性很重要时，我们建议使用node.js或许多第三方工具之一进行预编译。
       首先，将.less样式表链接到rel设置为“ stylesheet/less” 的属性：
       <link rel="stylesheet/less" type="text/css" href="styles.less" />
       接下来，下载less.js并将其包含在页面元素的<script></script>标记中<head>：
       <script src="less.js" type="text/javascript"></script>
       提示
           ○ 确保在脚本之前包含样式表。
           ○ 当您链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，混合或名称空间都无法访问。
           ○ 由于浏览器加载外部资源的原始策略相同，因此需要启用CORS
       选项
       通过在以下位置之前在全局less对象上设置选项来定义选项：<script src="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"></script>
       或者为了简洁起见，可以将它们设置为脚本和链接标记上的属性（需要JSON.parse浏览器支持或polyfill）。
       <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">
       详细了解浏览器选项

邱新磊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less入门

less网站地址: http://lesscss.cn快速入门 Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。更少可以运行在Node或浏览器端。例：@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;#header { color: @lig...
复制链接

扫一扫

专栏目录