zoukankan      html  css  js  c++  java
  • less学习笔记一

    简介:

    Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。

    浏览器端使用:

    浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中,尤其是对性能要求比较高的场合, 建议使用node或者其它第三方工具先编译成CSS再上线使用 

    首先,引入 rel 属性的值是 stylesheet/less 的 .less 样式表 :

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

    接下来,下载 less.js 并将其包涵在您的页面 <head> 元素的 <script></script> 标记中:

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

    Tips:

    • 确保包涵 .less 样式表在 less.js 脚本之前引用
    • 当你引入多个 .less 样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

    浏览器端设置参数:

    你可以引入 <script src="less.js"></script> 之前通过创建一个全局 less 对象的方式来指定参数,例如:

    <!-- set options before less.js script -->
    <script>
      less = {
        env: "development",//可以在development或是production环境下运行,在production环境下,CSS被缓存在本地,消息和信息不能输出到console。
    文档的URL开头是file:// ,或是在本地机器中,或是有不标准端口,env的参数将自动设置为development
    async: false,//用来判断是否异步导入文件 fileAsync: false,//使用文件协议访问页面时异步加载导入的文件。 poll: 1000,//在监视模式下,每两次请求之间的时间间隔(ms)。 functions: {},//在functions这个对象中,key作为函数的名字。 dumpLineNumbers: "comments",//String 参数: ''| 'comments'|'mediaquery'|'all' 默认: '',comments 参数用于输出用户可以理解的内容 relativeUrls: false,//是否调整相对路径。如果为false,则url已经是相对于入口的LESS文件。 rootpath: ":/a.com/"//添加到每个URL开始处的路径 }; </script> <script src="less.js"></script>

    或为了简化它们可以在 script 和 link 标记上设置属性(需要的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">

    浏览器支持:

    Less仅支持在最近版本的 Chrome, Firefox, Safari 和IE上运行。不鼓励用户在生产环境中使用,因为Less样式表在编译成css样式文件时会引起界面显示延迟,即使是一秒的延迟也会使用户感觉到性能降低了;并且如果发生了js报错,有可能会引起界面显示错位。

  • 相关阅读:
    【luogu P1343 地震逃生】 题解
    【luogu P3931 SAC E#1
    【luogu P3275 [SCOI2011]糖果】 题解
    【luogu P2947 [USACO09MAR]向右看齐Look Up】 题解
    【luogu P1456 Monkey King】 题解
    【luogu P3377 左偏树(可并堆)】 模板
    【luogu P1993 小K的农场】 题解
    Sqlmap注入Base64编码的注入点
    kali高速更新源以及主题修改方法
    DiscuzX3.1搬家全过程
  • 原文地址:https://www.cnblogs.com/Youngly/p/6800692.html
Copyright © 2011-2022 走看看