<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. css—文字渐变色

    .text-gradient { display: inline-block; color: green; font-size: 10em; font-family: ´微软雅黑´; backgrou ...

  2. 京东专业“卖”队友，魅族手环将亮相1206魅蓝note新品发布会

    京东一直是国内顶级的数码产品自营销售渠道,但是,正因为庞大的数据体系和平台特殊性,经常会帮我们发现一些“好玩的”保密性较高的东西,譬如价格.信息.谍照等.而在最新上线的京东超级品牌日活动页面上,专业“ ...

  3. javascript中函数表达式的问题讨论

    #函数表达式 ##函数声明和函数表达式的区别 函数的定义有两种形式,一种是函数声明,一种是函数表达式 使用声明时,要注意函数声明提升现象,比如说在if语句中使用声明会出错,但是表达式就不存在这个问题 ...

  4. C语言基础 (5) 常用操作符

    01 课程回顾 变量的起名:字母数字下划线 不能是关键字 常量 变量提升:老的编译器这样会报错 运算符:sizeof.+.-.x … … 进制: 1111 8421 计算机几乎都是二进制系统,而且是以 ...

  5. HDU 5126 stars (四维偏序+树状数组)

    题目大意:略 题目传送门 四维偏序板子题 把插入操作和询问操作抽象成$(x,y,z,t)$这样的四元组 询问操作拆分成八个询问容斥 此外$x,y,z$可能很大,需要离散 直接处理四维偏序很困难,考虑降 ...

  6. Netty、NIO、多线程

    一:Netty.NIO.多线程? 时隔很久终于又更新了!之前一直迟迟未动也是因为积累不够,后面比较难下手.过年期间@李林锋hw发布了一个Netty5.0架构剖析和源码解读,看完也是收获不少.前面的文章 ...

  7. hibernate框架总结

    实体类编写规则1 实体类里面属性私有的 2 私有属性使用公开的set和get方法操作 3 要求实体类有属性作为唯一值(一般使用id值) 4 实体类属性建议不使用基本数据类型,使用基本数据类型对应的包装 ...

  8. 2015 Multi-University Training Contest 10 hdu 5411 CRB and Puzzle

    CRB and Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  9. spring的bean注入扫瞄方法和mybatis的dao bean注入扫描方法

    spring的bean注入扫面方法:@ComponentScan(basePackages = "com.pingan.property.icore.pap.*")mybatis的 ...

  10. 支付宝接口程序、文档及解读(ASP.NET)

    最近需要为网站加入支付宝的充值接口,而目前关于支付宝接口开发的资料比较杂乱,这里就我此次开发所用到的资料进行汇总整理,希望能够帮助需要的朋友. 开发步骤: 1. 确定签约类型 支付宝的接口有多种类型, ...