<html>
<head>
<title>Test Less</title>
<link rel="stylesheet/less" type="text/less" href="./here.less" />

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
<script>less.watch()</script>
<script></script>
</head>
<body>
<div class="box">
     <h3>Test Less</h3>
     <p> Less colect js as rugulations xml</p>
     <div>
      <table>
         <tr>
         <th>Property A</th>
         <th>Property B</th>
         <th>Property C</th>
         </tr>
        
         <tr>
         <td>AA 5 inch</td>
         <td>B 5.5 inch</td>
         <td>C1 11 inch</td>
         </tr>
        
         <tr>
         <td>AA 5 inch</td>
         <td>B 5.5 inch</td>
         <td>C1 11 inch</td>
         </tr>
        
         <tr>
         <td>AA 5 inch</td>
         <td>B 5.5 inch</td>
         <td>C1 11 inch</td>
         </tr>
        
         <tr>
         <td>AA 5 inch</td>
         <td>B 5.5 inch</td>
         <td>C1 11 inch</td>
         </tr>
        
      </table>
     </div>
     <div class="ca">
        <span>color adapter</span>
        <p>mix color  adapter</p>
        <div>
           <p class="color1">@red</p>
          <p class="color2">@green</p>
           <p class="color3">@blue</p>
          <p class="color4">@brown</p>
 
        </div>
     </div>
</div>

</body>

</html>

------

@base: #f938ab;
@base-font:10px;
@tr-oddandeven:#A7C942;
@list: "red", "green", "blue", "brown";
body{
   font-size:@base-font;
   h3 {
        font-size:@base-font+20px;
   }
   p{
       font-size:@base-font+10px;
   }
}
.paddings{
        padding-top:5px;
        padding-bottom:4px;
        padding-left:20px;
        padding-right:20px;
}

.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
 
 
  //div { .box-shadow(0 0 5px, 30%) }
 
  table {
    //-webkit-box-shadow:10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
    background-color: lighten(#b4b4b4, 20%);  
    border:1px solid red;    
    border-collapse:collapse;    
    th
    {
        .paddings;
        font-size:1.1em;
        text-align:left;        
        background-color:@tr-oddandeven;
        color:#ffffff;
        border:1px solid lighten(@base, 30%);
    }  
    tr td{
            .paddings;
            border:1px solid lighten(@base, 30%);
            
         }
    
    tr:nth-child(2n)
    {
         font-variant:small-caps;
        font-style:italic;
        color:purple
    }        
         
    tr:nth-child(odd){
        //background:lighten(@tr-oddandeven, 35%);
        background:saturation(@tr-oddandeven, 35%);
        //background:svg-gradient(to right, @tr-oddandeven, grey 30%, yellow);
    }
    tr:nth-child(even){
        background:lighten(@tr-oddandeven, 20%);
    }    
    
  }
   .ca {
     position:relative;
     top:20px;
       
      //background:lighten(@tr-oddandeven, 20%);        
      // background:darken(hsl(90, 80%, 50%),20% );
      background:fade(hsl(90, 90%, 50%), 10%);
      background:fade(hsl(90, 90%, 50%), 10%);
      background:fadeout(hsla(90, 90%, 50%, 0.5), 10%);
      
        
      padding-top: 50px;
      span {
        font-size:@base-font+20px;    
        color:spin(hsl(10, 90%, 50%), 30);
        background:spin(hsl(10, 90%, 10%), -60);        
      }
      p {
        color:mix(#ff0000, #0000ff, 50%);
        background:shade(rgba(0,100,255,0.1), 10%);          
      }
       .color1{
         color:e(extract(@list, 1));
       }
       .color2{
         color:e(extract(@list, 2));
       }
       .color3{
         color:e(extract(@list, 3));
       }
       .color4{
         color:e(extract(@list, 4));
       }
   }  
}

随机推荐

  1. DB2常用运维命令

    DB2是IBM公司推出关系型数据库管理系统.主要应用于银行.医院等大型机构.现今DB2主要包含以下三个系列:DB2 for Linux, UNIX and Windows(LUW) . DB2在Lin ...

  2. （4.33）sql server2014内存数据库（内存中OLTP（In-Memory OLTP））

    查看文章:https://blog.51cto.com/ultrasql/1626514

  3. Protocol Buffer格式传输

    1.简单明了介绍ProtocolBuffer 2. ProtocolBuffer(pb)所做事情其实类似于xml.json,也就是把某种数据结构的信息依照某种格式保存起来.主要用于数据存储.传输等. ...

  4. 仅前端cookie之记住密码

    参考文章给忘了...,我就在他基础上修改了一些,但至于安全性,我没弄md5,所以安全系数应该为0 <!DOCTYPE html> <html lang="en"& ...

  5. 洛谷P3628 [APIO2010]特别行动队 斜率优化

    裸题,注意队列下标不要写错 Code: #include<cstdio> #include<algorithm> #include<cmath> using nam ...

  6. 洛谷P3960 列队 Splay

    其实思路并不算太难,就是代码量相对较大. 我们将一次离队转换为一次删除和两次加入,这样就可以保证空间是动态分配的,最大也不会暴空间. 说实话写之前感觉会很恶心,但是代码量就还好吧,有些细节需要特殊注意 ...

  7. 路飞学城Python-Day59(第五模块复习题)

    HTML div标签是块级标签,单独一行,可以作为其他标签的容器,没有特定含义 span是内联标签,可以作为文本内容的容器,没有特定含义 1. 查询一下对div和span标签的理解 不同的标签有自己含 ...

  8. PHP 中 call_user_func 的使用

    call_user_func函数类似于一种特别的调用函数的方法,使用方法如下 第一种情况: function set_max($a,$b) { if($a>$b) echo $a; else e ...

  9. Redis,Memcache的区别和具体应用场景

    1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器.其本质上就是一个 ...

  10. LCA【模板】

    #include <algorithm> #include <cstdio> #include <vector> #define N 10015 using nam ...