<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. vue常用方法

    vue移动端ui库: http://mint-ui.github.io/#!/zh-cn vue做app开发使用: weex 官网地址:http://weex.apache.org/cn 1.Vue组 ...

  2. jq图片懒加载

    jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...

  3. PHP 判断一个字符是否在字符串中

    strpos() - 查找字符串 在另一字符串中 第一次出现的位置(区分大小写) stripos() - 查找字符串 在另一字符串中 第一次出现的位置(不区分大小写) strrpos() - 查找字符 ...

  4. 使用DOS命令查找包含某一字符串的所有文件

      在windows系统下,来查找并修改指定目录下包含某一字符串的所有文件,麻烦又费时.其实在DOS命令中,提供了Findstr命令来查找指定的一个或多个文件文件中包含(或通过参数 /V来控制不包含) ...

  5. MySQL-字符类型与约束条件

    创建表完整的语法: create table 表名(字段名1 类型[(宽度) 约束条件],字段名2 类型[(宽度) 约束条件],字段名3 类型[(宽度) 约束条件]); 注意事项: 1. 在同一张表中 ...

  6. Linux crontab 在每月最后一天执行

    59  23 * * * if [ `date +%d -d tomorrow` = 01 ]; then; command(/usr/bin/curl -s -o temp.txt  http:// ...

  7. SLAB

    slab:由于内核会有许多小对象,这些对象构造销毁十分频繁,比如i-node,dentry,这些对象如果每次构建的时候就向内存要一个页(4kb),而其实只有几个字节,这样就会非常浪费,为了解决这个问题 ...

  8. vue 如何动态切换组件，使用is进行切换

    日常项目中需要动态去切换组件进行页面展示. 例如:登陆用户是“管理员”或者“普通用户”,需要根据登陆的用户角色切换页面展示的内容.则需要使用 :is 属性进行绑定切换 <template> ...

  9. 最短路&查分约束

    [HDU] 1548 A strange lift 根蒂根基最短路(或bfs)★ 2544 最短路 根蒂根基最短路★ 3790 最短路径题目 根蒂根基最短路★ 2066 一小我的观光 根蒂根基最短路( ...

  10. CF914A Perfect Squares

    CF914A Perfect Squares 题意翻译 给定一组有n个整数的数组a1,a2,…,an.找出这组数中的最大非完全平方数. 完全平方数是指有这样的一个数x,存在整数y,使得x=y^2y2  ...