less入门基础语法合集,原来css还可以这么写,你想不到吧!!

发布于 2022-07-12 22:42:21

less允许我们使用后端编程思维来编写css样式,可以定义变量、运算、判断和自定义函数,还可以嵌套表示div父子级关系。

变量

//定义变量
@header-width:1000px;
//使用变量
.header{
   width:@header-width;
}

嵌套

.header{
   width: @header-width;
   .nav-ul{
     height: 64px;
     li {
         position: relative;
     }
     // & 标识li:after
     &:after {
        content: '.';
        display: block;
        background-color: aquamarine;
      }
   }
}

函数

可以传入变量,也可以直接传值

//定义函数
.bg-color(@black;@opacity) {
 background-color: ~"rgba(@{accent-black},@{opacity})";
} 
//使用函数
 .input{
    // background-color: ~"rgba(@{accent-black},@{opacity-4})";
    .bg-color(@accent-black,@opacity-4); 
    border-radius: 4px;   
 }
0 条评论

发布
问题