less基础教程

less基础教程

1. 说明

   less是css的升级版。主要从编程角度来书写css。其中包括众所周知的变量，运算，命名空间等

2. 案例

   1. 变量

      @width:300px;
      @bgcolor:red;
      div{
          height: @width;
          background:@bgcolor ;
      }
      
      

      div {
        height: 300px;
        background: #ff0000;
      }
      
      

   2. 混合

      1. 不带参数

         //@定义变量
         @width:300px;
         @bgcolor:red;
         div{
             height: @width;
             background:@bgcolor ;
               .border-radius();
         }
         //定义混合
         .border-radius{
             border-radius: 50%;
         }
         
         
         

         div {
           height: 300px;
           background: #ff0000;
           border-radius: 50%;
         }
         .border-radius {
           border-radius: 50%;
         }
         
         

      2. 带参数

         //@定义变量
         @width:300px;
         @bgcolor:red;
         div{
             height: @width;
             background:@bgcolor ;
             .border-radius(50px);
         }
         //定义混合
         .border-radius(@radius) {
           border-radius:@radius ;
         }
         
         

         div {
           height: 300px;
           background: #ff0000;
           border-radius: 50px;
         }
         
         

   3. 嵌套

      1. 无伪类嵌套

         //@定义变量
         @width:300px;
         @bgcolor:red;
         div{
             height: @width;
             background:@bgcolor ;
             h1{
                 height: 50px;
             }
             p{
                 background: red;
             }
         }
         
         

         div {
           height: 300px;
           background: #ff0000;
         }
         div h1 {
           height: 50px;
         }
         div p {
           background: red;
         }
         
         

      2. 伪类嵌套

         //@定义变量
         @width:300px;
         @bgcolor:red;
         div{
             height: @width;
             background:@bgcolor ;
             //&代表当前父元素div
            &:after{
                content: ".";
                height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }
         }
         
         

         div {
           height: 300px;
           background: #ff0000;
         }
         div:after {
           content: ".";
           height: 0;
           display: block;
           clear: both;
           visibility: hidden;
         }
         
         

   4. 运算

      //@定义变量
      @width:300px;
      @bgcolor:red;
      div{
          //运算
          height: @width+100px;
          background:@bgcolor ;
      
      }
      
      

      div {
        height: 400px;
        background: #ff0000;
      }
      
      

   5. 转译:变量值原样输出

      //~用来转译
      @width:~"(min-width:375px)";
      @bgcolor:red;
      div{
          background:@bgcolor ;
          @media @width{
              background: red;
          }
      
      }
      
      

      div {
        background: #ff0000;
      }
      @media (min-width:375px) {
        div {
          background: red;
        }
      }
      
      

   6. 作用域

      
      //全局变量
      @width:300px;
      @bgcolor:red;
      div{
          //局部变量
          @width:400px;
          background:@bgcolor ;
          height: @width;
      }
      
      

      div {
        background: #ff0000;
        height: 400px;
      }