小目标

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

less注释

可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中。开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文件中不会有注释。

less变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。例如:@width:300px

less混合

混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。 在LESS中,可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。

可以创建一个mixin,它可以通过简单地放置括号后在输出中消失。

.a(){
  padding-left: 100px;
}
.myclass{
  background : #64d9c0;
  .a;
}

最终输出的css为:

.myclass {
  background: #64d9c0;
  padding-left: 100px;
}

也可以传递参数

.border_radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.test{
  width:300px;
  height:200px;
  .border_radius(10px);
}

编译之后的css代码为:

.test {
  width: 300px;
  height: 200px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

 

less嵌套

它是一组CSS属性,允许将一个类的属性用于另一个类,并且包含类名作为其属性。

.container{
     h1{
         font-size: 25px;
         color:#E45456;
        }
     p{
          font-size: 25px;
          color:#3C7949;
      }
  }

less操作

LESS支持一些算术运算,例如加号(+),减号( - ),乘法(*)和除法(/),它们可以对任何数字,颜色或变量进行操作。

@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}

 

posted on 2017-09-16 22:18  自信哥  阅读(191)  评论(0编辑  收藏  举报