前端学习(七）less（笔记）

less---处理器：koala_2.0.4_portable

属于css预处理语言，可以让你的css语言更有逻辑性！

编译css的！

准备工作：
   1.项目：
       js
       css
       img
       less
   2.less：
       a1.less

   3.把项目拖到编译软件里
       点击绿色按钮：在css文件夹里会编译出一个a1.css

   4.开始写页面

       1.新建index.html
       2.在index.HTML里面引入编译出来的a1.css
       3.在index.HTML里面写标签，在a1.less里面写样式！

       4.在a1.less里面写less方法的样式
---------------------------------------------------

less方法：

1.样式值变量！

变量：名字

例子：
@w:300px;
@b:3px;
@back:#000;
@da:dashed;

div{@w; height:100px; border:@b @da @back;}
p{@w;height:200px; background:@back;border:@b solid red;}

2.运算！

例子：
@w:300px;
@b:3px;
@back:#000;
@da:dashed;

.box1{@w+300px; height:100px-50px; border:@b @da @back;}
p{@w;height:200px+@w; background:@back;border:@b solid red;}
.box2{@w/3; height:100px*5; border:@b @da @back;}

3.嵌套：
   最好嵌套4层！
html：
<div class="box">
   <div class="t-box">
       <ul>
           <li>
               <div class="box1">
                   <p>
                       <a href></a>
                   </p>
               </div>
           </li>
       </ul>
   </div>
</div>

less:
.box{
   100px;
   t-box{
       100px;
       ul{
           height:100px;
           li{
               100px;

           }
       }
   }
}

.box ul li{
   .box1{
       300px;
       p{
           200px;
           a{
               font-szie:100px;
           }
       }
   }
}

4.伪类：

css:
a{color:red}
a:hover{color:blue};

less:
a{
   color:red;
   &:hover{
       color:green;
   }
}

----------------------------
css:
.clearfix:after{display:block; content:'';clear:both}
.clearfix{zoom:1};

less:
.clearfix{
   zoom:1;
   &:after{
       display:block;
       content:'';
       clear:both;
   }
}

====================================================
5.定义一个选择器

例子：
.text{----定义一个class选择器
   line-height:100px;
   text-align:center;
}

div{
   100px;
   height:100px;
   border:2px solid red;
   .text;---调用上面的选择器
}
p{
   100px;
   height:100px;
   border:2px solid blue;
   .text;---调用上面的选择器
}
---------------------------------------------
6.定义选择器加传参：
例子：
.text(@num){
   line-height:@num;
   text-align:center;
}

div{
   100px;
   height:100px;
   border:2px solid red;
   .text(100px);
}
p{
   100px;
   height:200px;
   border:2px solid blue;
   .text(200px);
}

------------------------------------------
7.有默认值的传参！

.text(@num:100px){
   line-height:@num;
   text-align:center;
}

.box1{
   100px;
   height:100px;
   border:2px solid red;
   .text();
}
.box2{
   100px;
   height:100px;
   border:2px solid red;
   .text();
}
.box3{
   100px;
   height:100px;
   border:2px solid red;
   .text();
}
.box4{
   100px;
   height:400px;
   border:2px solid red;
   .text(400px);
}
p{
   100px;
   height:200px;
   border:2px solid blue;
   .text(200px);
}

8.多个传参