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