• here.less


    <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));
           }
       }  
    }

  • 相关阅读:
    C# .Net WinForm控件GDI+重绘位置错乱
    查询视图对应的基表名以及视图字段和对应的基表字段名
    解决在高分屏下开发winform界面变形
    ping命令工具:同时ping多个IP
    SmartAssembly批处理用法
    C#二维数组的初始化和存取
    win7 X64 进程名称不一致,导致杀进程失效!
    在存储过程中声明局部游标以循环调用自身
    强制设置双缓冲DoubleBuffered 解决tableLayoutPanel 闪烁
    Using SmartAssembly with MSBuild
  • 原文地址:https://www.cnblogs.com/rojas/p/10955603.html
Copyright © 2020-2023  润新知