less语法

冷不防 2022-06-02 02:13 221阅读 0赞

test.less

/*多行注释*/
    //单行注释
    
    /*声明变量*/
    @jdRed:#e4393c;
    @thinBorder:3px;
    @halfOpacity:0.6;
    @baseFont:'SimHei';
    
    .box3{
      font:@baseFont;
      background: rgba(0,0,0,@halfOpacity);
      border:@thinBorder solid @jdRed;
    }
    
    /*算数运算*/
    @md-width:970px;
    @col-count:12;
    .col-md-1{
      width:@md-width/@col-count;
    }
    .col-md-2{
      width:@md-width/@col-count*2;
    }
    
    /*样式混入*/
    .box5{
      padding:15px;
      background: #1ABB9C;
    }
    .box6{
      .box5;
      font-size:19px;
    }
    
    /*带参数的混入*/
    .box7(@pd,@bw,@bg){
      padding:@pd;
      border:@bw solid #aaa;
      background: @bg;
    }
    .box8{
      .box7(10px,3px,red);//这里记得加逗号
    }
    
    /*简便书写方法*/
    .main{
      background: #0FF;
      .affix{
        list-style:none;
        >li{
          display: inline-block;
          >a{
            text-decoration: none;
            &hover{
              color: red;
            }
          }
        }
      }
    }
    
    /*函数*/
    .col-md-3{
      width:floor(970px/12*3);
    }
    .box9{
      color: @jdRed;
      background: lighten(@jdRed,40%);
    }
    .my-img{
      width:image-width("1.jpg");
      height:image-height("1.jpg");
    }

test.css

/*多行注释*/
    /*声明变量*/
    .box3 {
      font: 'SimHei';
      background: rgba(0, 0, 0, 0.6);
      border: 3px solid #e4393c;
    }
    /*算数运算*/
    .col-md-1 {
      width: 80.83333333px;
    }
    .col-md-2 {
      width: 161.66666667px;
    }
    /*样式混入*/
    .box5 {
      padding: 15px;
      background: #1ABB9C;
    }
    .box6 {
      padding: 15px;
      background: #1ABB9C;
      font-size: 19px;
    }
    /*带参数的混入*/
    .box8 {
      padding: 10px;
      border: 3px solid #aaa;
      background: red;
    }
    /*简便书写方法*/
    .main {
      background: #0FF;
    }
    .main .affix {
      list-style: none;
    }
    .main .affix > li {
      display: inline-block;
    }
    .main .affix > li > a {
      text-decoration: none;
    }
    .main .affix > li > ahover {
      color: red;
    }
    /*函数*/
    .col-md-3 {
      width: 242px;
    }
    .box9 {
      color: #e4393c;
      background: #fceded;
    }
    .my-img {
      width: 1024px;
      height: 768px;
    }

test.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <div class="box3">
            less特性
        </div>
        <h3 class="col-md-1">col-1</h3>
        <h3 class="col-md-2">col-2</h3>
        <div class="box6">
            混入
        </div>
        <div class="box8">
            带参数的混入
        </div>
        <div class="main">
            <h1>less</h1>
            <ul class="affix">
                <li><a href="">产品1</a></li>
                <li><a href="">产品2</a></li>
            </ul>
        </div>
    </body>
    </html>

效果图:

![20171230123230701][]

[20171230123230701]: /images/20220602/a42daf204e664302834a244f52d4f064.png