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文件，放在一个位置后，直接引入；
    "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");
    }

  • 变量的延迟加载；

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

    • 在定义一个变量两次时，只会使用最后定义的变量，Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。

      • less文件

        .wrap{
            @test:1;
            .inner{
                @test:2;
                width: @test;//3
                @test:3;
            }
            width:@test;//1
        }

      • css文件

        //css文件
        .wrap {
          width: 1;
        }
        .wrap .inner {
          width: 3;
        }

less嵌套

• LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便.

  • less中的嵌套规则；

  • &符的用法；

    • less文件

      //less的编写样式
      
      #wrap{
      
          overflow: hidden;
          margin: 100px auto;
          width: 150px;
          background-color: palegoldenrod;
          a{
              float: left;
              //a的伪类选择器使用&代替，&符代表的是当前的父级元素;
              //有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
              &:hover{
                  background-color: red;
              }
          };
          span{
              float: right;
          };
      }

    • css文件

      //css的原设置
      
      #wrap{
      
          overflow: hidden;
          margin: 100px auto;
          width: 150px;
          background-color: palegoldenrod;
      }
      //设置wrap下的a和span标签、以及a标签的伪类的样式
      
      #wrap a{float: left;}
      
      
      #wrap a:hover{background-color: red;}
      
      
      #wrap span{float: right;}
      

Mixins（混入）

• 在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

  • 普通混合；

  • 不带输出的混合；

  • 带参数的混合

  • 带参数并且有默认值的混合

  • 带多个参数的混合

    • 注意：

      • 传参的时候不推荐使用逗号，而是应该使用分号；

      • 如果需要传的简写样式属性的属性值时，中间可以使用逗号隔开，此时传的就是简写属性值；

        • less文件：

          .juzhong(@wi:200px,@he:200px,@bgc:black){
              left: 0;
              right: 0;
              bottom: 0;
              top: 0;
              margin: auto;
              position: absolute;
              width: @wi;
              height: @he;
              background-color: @bgc;
          }
          
          #wrap{
          
              position: relative;
              width: 500px;
              height: 500px;
              background-image: url("../img/starSky.jpg");
              .inner1{
                  //传参数时，中间使用分号隔开！
                  .juzhong(300px;300px;yellow);
          
              }
              .inner2{
                  .juzhong(150px;150px;red);
          
              }
          }

        • css文件

          
          #wrap {
          
            position: relative;
            width: 500px;
            height: 500px;
            background-image: url("../img/starSky.jpg");
          }
          
          #wrap .inner1 {
          
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: #ffff00;
          }
          
          #wrap .inner2 {
          
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: #ff0000;
          }

  • 命名参数的形式

    • 如果不是按照顺序传值，那就将所传值的属性名标注上；

      • less文件

        .juzhong(@w:100px,@h:100px,@c:pink){
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: @w;
            height:@h;
            background: @c;
        }
        
        #inner2{
        
                .juzhong(@c:deeppink;@h:200px);
                z-index: 0;
            }

      • css样式

        
        #inner2 {
        
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 100px;
          height: 200px;
          background: #ff1493;
          z-index: 0;
        }

  • 匹配模式

    • less文件

      //做几个三角形
      
      .triangle(@_,@bw:200px){
      //@_：指的就是公共部分！注意如果下面的混入有需要传参的参数，那么在这个公共部分必须也作为参数写入公共混入。
          width: 0px;
          height: 0px;
      }
      .triangle(top,@bw:200px){
          border-width: @bw;
          border-color: red transparent transparent transparent;
          border-style: solid dashed dashed dashed;
      }
      .triangle(right,@bw:200px){
          border-width: @bw;
          border-color: transparent red transparent transparent;
          border-style: dashed solid dashed dashed;
      }
      .triangle(bottom,@bw:200px){
          border-width: @bw;
          border-color: transparent transparent red transparent;
          border-style: dashed dashed solid dashed;
      }
      .triangle(left,@bw:200px){
          border-width: @bw;
          border-color: transparent transparent transparent red;
          border-style: dashed dashed dashed solid;
      }
      //写好的混入被引入。
      .sjx1{
          .triangle(top,@bw:200px);
      }
      .sjx2{
          .triangle(right,@bw:200px);
      }
      .sjx3{
          .triangle(bottom,@bw:200px);
      }
      .sjx4{
          .triangle(left,@bw:200px);
      }

    • css文件

      
      .sjx1 {
        width: 0px;
        height: 0px;
        border-width: 200px;
        border-color: red transparent transparent transparent;
        border-style: solid dashed dashed dashed;
      }
      .sjx2 {
        width: 0px;
        height: 0px;
        border-width: 200px;
        border-color: transparent red transparent transparent;
        border-style: dashed solid dashed dashed;
      }
      .sjx3 {
        width: 0px;
        height: 0px;
        border-width: 200px;
        border-color: transparent transparent red transparent;
        border-style: dashed dashed solid dashed;
      }
      .sjx4 {
        width: 0px;
        height: 0px;
        border-width: 200px;
        border-color: transparent transparent transparent red;
        border-style: dashed dashed dashed solid;
      }

  • arguments变量

    • less文件

      .border(@w:20px,@c:black,@style:solid){
          width: 100px;
          height: 100px;
          background: pink;
          //定义了一个简写属性，用来接收传入参数；
          border:@arguments;
      }
      
      #wrap{
      
          .border(10px,deeppink,solid);
      }

    • css文件

      
      #wrap {
      
        width: 100px;
        height: 100px;
        background: pink;
        border: 10px #ff1493 solid;
      }

其他

• 运算
  
  • less的运算可以将变量和数值放在一起做运算，运算参与者任一个有单位，就自动加上单位；
• Comments（注释）
  
  • 单行注释和多行注释；
  • LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中
  • 如果注释是针对样式说明的请使用多行注释（/多行注释/）。