less语法

最新推荐文章于 2022-08-15 22:48:35 发布

转载最新推荐文章于 2022-08-15 22:48:35 发布 · 374 阅读

文章标签：

#less 语法

less 专栏收录该内容

2 篇文章

订阅专栏

本文介绍LESS CSS预处理器的基本特性和使用方法，包括变量声明、算数运算、样式混入及简便书写等高级功能，并通过具体示例展示了如何将LESS转换为标准CSS，最后给出了一个简单的HTML页面作为应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果图: