less基础讲解

less详解

less概念

• less是一种动态样式语言，属于CSS预处理语言的一种；
• 它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护；
• less可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
• less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件;
• less 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

less的使用

• 客户端的用法

  //可以通过link引入css后，通过 <script></script> 标签将其引入less.js
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="less.js" type="text/javascript"></script>
  
  //或者在index中直接写入css样式，再引入less.js
  <style type="text/less">
      //css的样式
  </style>
  <script src="less.min.js" type="text/javascript"></script>

  • 注意：确保在 less.js 之前加载你的样式表。

• （常用方式）将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。

  • 使用考拉，将less文件转化成css直接进行使用;
  • Koala（考拉）是一个开源的预处理语言图形编译工具，目前已支持Less、Sass、Compass与CoffeeScript。

  • 可以将便携的less文件在考拉中进行转译，成为css文件，直接进行引入：

    //lessSource/index2.css是转译后css文件，放在一个位置后，直接引入；
    <link rel="stylesheet" type="text/css" href="lessSource/index2.css" />

less变量

• 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
  
  • 变量作为普通变量；
  • 变量作为选择器或者属性名；
  • 变量作为url；

• 代码示例

  • less文件

    //变量作为url
    //注意，在做url时，引入的时候在url()中一定要有引号将其包裹，并且变量的@后面加上大括号，大括号内写imgUrl。
    @imgUrl:"../img/starSky.jpg";
    //作为普通变量的变量
    @w:400px;
    //作为选择器或者变量名的变量
    @h:height;
    
    //依据变量规则设置的less样式：
    *{
        margin: 0;
        padding: 0;
    }
    
    #wrap{
    
        position: relative;
        width: @w;
        @{
           h}: 500px;
        background-image: url("@{imgUrl}");
    }

  • css文件

    //考拉转译后的结果,css文件
    * {
      margin: 0;
      padding: 0;
    }
    
    #wrap {
    
      position: relative;
      width: 400px;
      height: 500px;
      background-image: url("../img/starSky.jpg");
    }

  • 变量的延迟加载；

    • 变量是延迟加载的，在使用前不一定要预先说明；
    • 查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局；

    • 在定义一个变量两次时