Less学习笔记

Less类似于jquery，是一个库。是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

• less 的 &代表连接符的意思
  

• Less的模式有混合模式和 匹配模式

• 混合模式：

    .border(){ border:1px solid red; }
    .border(@width){ border:@width solid red; } 
  复制代码

• Less中的注释

    /**/可以被编译
    //不可以被编译
  复制代码

• less中声明变量用@开头，例如：@变量名：值

• Less 混合:一个元素引用另一个元素的样式

1、混合变量

    例如：.border{border:solid 10px red;}
    如果.div也想用这个样式直接写：
复制代码

.div{
    .border
}
复制代码

2、变量没带值：

.border-radius(@radius){css代码}
    .border_02(@border_width){
        border:solid yellow @border_width;
    }
.test_hunhe{
    .border_02(30px);
}
复制代码

3、变量带(默认)值：

.border-radius(@radius:5px){css代码}
.border_03(@border_width:10px){
    border:solid green @border_width;
}
.test_hunhe_03{
.border_03();
}
复制代码

另外，虽然.border-02 和.border-03里面的变量都叫@border-width 但它们不冲突
复制代码

//匹配模式－定位
.pos(r){
    position: relative ;
}
.pos(a){
    position: absolute ;
}
.pos(f){
    position: fixed ;
}
.pipei{
    width: 200px ;
    height: 200px ;
    .pos(f) ;
}
复制代码

• // 嵌套规则
• // 最有意思的小东西

.list{
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
 
 li{
    height: 30px;
    line-height: 30px;
    background-color: pink;
    margin-bottom: 5px;
    padding:0 10px;
 }
 a{
    float: left;
    //&代表他的上一层选择器
    &:hover{
    color:red;
    }
 }
 span{
    float: right;
  }
}

// @arguments包含了所有的参数
.border_arg(@w:30px;@c:red;@xx:solid){
    border:@arguments;
}

.test_arguments{
    .border_arg(40px);
}
复制代码

转载于:https://juejin.im/post/5bb316875188255c9a7744cb