<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. （转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

  2. sqlserver 分组 group by

    select 名称, COUNT(名称) as 数量之和from 信息group by all 名称

  3. 优动漫PAINT核心功能介绍

    优动漫PAINT是一款功能强大的动漫绘图软件,适用于个人和专业团队创作,分为个人版和EX版.搭载了绘制漫画和插画所需的所有功能——丰富的笔工具.超强的笔压感应和手颤修正功能,可分别满足画师对于插画.漫 ...

  4. CSV文件模块的使用

    ---恢复内容开始--- 1.CSV模块使用流程 1.导入模块 impport CSV 2.打开文件(xxx.csv) with open('xxx.csv','a',encoding='utf-8' ...

  5. php libevent扩展

    Libevent 是一个用C语言编写的.轻量级的开源高性能网络库,主要有以下几个亮点:事件驱动( event-driven),高性能;轻量级,专注于网络,不如 ACE 那么臃肿庞大: 源代码相当精炼. ...

  6. USACO 2008 Mar Silver 3.River Crossing 动态规划水题

    Code: #include<cstring> #include<algorithm> #include<cstdio> using namespace std; ...

  7. Django生命周期，FBV，CBV

    一. Django生命周期 首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串,在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页中.Django的请求生命周 ...

  8. LCA 最近公共祖先 (笔记、模板)

    求lca的方法大体有三种: 1.dfs+RMQ(线段树 ST表什么的) 在线 2.倍增 在线 3.tarjan 离线 ps:离线:所有查询全输入后一次解决 在线:有一个查询输出一次 以下模板题为 洛谷 ...

  9. Django入门--模型系统(二)：常用查询及表关系的实现

    1.常用查询 模型类上的管理器: ** 模型类.objects ** (1)常用一般查询 rs = Student.objects.all() # 查询所有记录,返回Queryset print(rs ...

  10. 专访Bruce Douglass，谈嵌入式经验

     Bruce:表面上看,编程就是想要实现什么就写什么代码:但事实是,敲代码只是软件开发过程中很小的一部分,程序员的工作还包括安全分析.责任分析.产品验证.产品分析等.      =========== ...