html use less

最新推荐文章于 2022-09-07 19:44:27 发布

fyinthesky

最新推荐文章于 2022-09-07 19:44:27 发布

阅读量191

点赞数

分类专栏： less css3 文章标签： html use less

本文链接：https://blog.csdn.net/fyinthesky/article/details/90714223

版权

css3 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

less

1 篇文章 0 订阅

订阅专栏

html use less

1 首先建立一个here.less的文件：

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

2 在建立一个使用的文件less.html：

<html>
<head>
<title>Test Less</title>
<link rel="stylesheet/less" type="text/less" href="./here.less" />
<script src="2.5.3_less.min.js" type="text/javascript"></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>

3 注意：所有文件必须部署到某个应用服务器上，例如 tomcat.

其次，使用到的less的库文件，最好使用本地的，如果用CDN的可能会没效果。如我们把

2.5.3_less.min.js

可以参考 https://less.bootcss.com/

fyinthesky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html use less

html use less1 首先建立一个here.less的文件：@base: #f938ab;@base-font:10px;@tr-oddandeven:#A7C942;@list: "red", "green", "blue", "brown";body{ font-size:@base-font; h3 { font-size:@base-fo...
复制链接

扫一扫

专栏目录