Less学习笔记

less基础

less的注释

// 编译不出来

/* */ 可以编译出来，也就是css可以看得到这注释

less的变量

用@申明一个变量，例如@b:2；

1. 普通用法： @b : red;   调用时：color：@b;

2.若定义为选择器或者属性名来使用  定义时：@nav : #nav;  使用时：@{nav}{ }。注意：若定义时未加 # 或者 . 则使用时是这样：#@{nav}{ } 或者 .@{nav}{ }。

less的嵌套规则

1. 可以像html嵌套一样一直写子集样式

2. 注意&的用法，代表其父级

less中的混合

例如：

        1.（无参数）

        .juzhong{

                       ...设置的样式                       

}

        调用：div{ .juzhong }

        2. (有参数)

        .juzhong(@a,@b,@c){

                                          color:@a;

                                          width:@b;

                                          heigth:@c;

}

       调用：div { .juzhong(pink,200px,200px) }

       3.(有默认值参数)

          

      .juzhong(@a:pink , @b:200px , @c:200px ){

                                          color:@a;

                                          width:@b;

                                          heigth:@c;

}

命名参数

        就是在调用时，指定某个属性的值，例如 div { .juzhong(@a:black) }

匹配模式

argument

                 

less的继承

     首先得先写好一个被继承的less

     继承时得在继承的less文件写上： @import "被继承的less的地址";

            

     less这样写       标签:extend(.jizhong){  }

          

         

          效果是这样(会都拥有.jizhong的样式)

           

注意：(这里是举例)想要把.jizhong的所有样式都继承过来得这样写：

            .inner:extend(.jizhong all){  }

             比如 

             .jizhong:hover{}这些，hover{}里的样式得弄优先级，在每个样式后面写上 ! important