<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. PLSQL 11注册码

    plsql 11 注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca

  2. mysql组复制集群简介

    mysql组复制集群拓扑: 环境: centos6.5 mysql5.7.19 一.组复制搭建: 配置hosts文件 再三台服务器上分别启动一个mysql实例,共三个. 参考配置文件如下: serve ...

  3. In-Out Parameters inout keyword

    You write an in-out parameter by placing the inout keyword right before a parameter’s type. An in-ou ...

  4. PhotoZoom放大的图片效果怎么样？清不清晰？

    PhotoZoom是一款使用了革命性技术.效果最好的图像无损放大工具.它可以对图片进行放大而没有锯齿,不会失真,让您无与伦比完美放大图像质量. PhotoZoom Pro使用了S-Spline Max ...

  5. Javase 简单代码练习

    public class Test10 { public static void main(String[] args) { System.out.println("------------ ...

  6. 【转】DBSCAN密度聚类算法

    DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密度聚类算法,和K-M ...

  7. Airtest多设备跑

    一.   一个脚本对应一台设备 核心点:组织运行命令:将组织好的命令传到pool进程池(注意:是进程池,不是线程池,python的线程池不是同步执行,是按序执行) 以下不需要看,为私人项目备份目的. ...

  8. Scala 技术笔记之 可变长参数

    转自 http://www.cnblogs.com/rollenholt/p/4112833.html Scala 允许你指明函数的最后一个参数可以是重复的.这可以允许客户向函数传入可变长度参数列表. ...

  9. 用基于WebGL的BabylonJS来共享你的3D扫描模型

    转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型 杰克祥子 2014 年 2 月 26 日 0 条评论 标签:3D扫描 , B ...

  10. -2 caffe数据结构

    一.Blob 使用: 访问数据元素: 计算diff: 保存数据与读取数据: 二.Layer 三.Net