less

1.less
   针对的就是CSS，修改样式。

2.编译方法
    编译的方法有很多种，若使用Hbuilder最方便。
      1.新建一个less文件夹，在此文件夹下新建一个less文件。
      2.在编辑less文件的窗口右击，将会出现编译选项，
      3.点击编译确定存储的位置，HBuilder自动讲less转化成CSS。
      4.然后将css文件引入HTML文件中就可以了。
      5.当对less文件修改了，点击编译覆盖原来的的位置就可以了。

3.变量
 
4.混合
 
 
5.匹配
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="css/6-匹配模式.css" />
  7. 	</head>
  8. 	<body>
  9. 		<div class="box1"></div>
  10. 		<div class="box2"></div>
  11. 		<div class="box3"></div>
  12. 		<div class="box4"></div>
  13. 	</body>
  14. </html>

 
 
8.嵌套。
  直接在less中可以像HTML那样的关系写样式，编译会自动找父级。
  1. /*
  2.  * &        上一层的选择器
  3.  */
  5. #box{
  6.     width: 500px;
  7.     padding: 20px;
  8.     border: 1px solid #f00;
  9.     &{
  10.         border: 5px solid #f00;
  11.     }
  12.     
  13.     h2{
  14.         font: 20px/20px "微软雅黑";
  15.     }
  16.     
  17.     p{
  18.       color: green;  
  19.     }
  20.     
  21.     ul{
  22.         margin: 0;
  23.         padding: 0;
  24.         list-style: none;
  25.         
  26.         li{
  27.             height: 30px;
  28.             background: #ccc;
  29.             
  30.             a{
  31.               color: #f00;
  32.               &:hover{
  33.                   color: blue;
  34.               }
  35.             }
  36.         }
  37.     }
  38. }
编译成的CSS
  1. * 
  2. * */
  3. /*
  4.  * &        上一层的选择器
  5.  */
  6. #box {
  7.   width: 500px;
  8.   padding: 20px;
  9.   border: 1px solid #f00;
  10.   border: 5px solid #f00;
  11. }
  12. #box h2 {
  13.   font: 20px/20px "微软雅黑";
  14. }
  15. #box p {
  16.   color: green;
  17. }
  18. #box ul {
  19.   margin: 0;
  20.   padding: 0;
  21.   list-style: none;
  22. }
  23. #box ul li {
  24.   height: 30px;
  25.   background: #ccc;
  26. }
  27. #box ul li a {
  28.   color: #f00;
  29. }
  30. #box ul li a:hover {
  31.   color: blue;
  32. }

9.运算
  4. @w:300px;
  6. .box1{
  7.     width: @w;
  8.     height: @w+100;
  9.     height: @w - 100;
  10.     //* 在做减法运算的时候，一定要记着，减号前后要加上一个空格，不然就会报错
  11.     
  12.     border: 1px solid #f00;
  13.     
  14.     position: relative;
  15.     left: @w*2;
  16.     top: @w/3;
  17. }
  20. @width: 200px;
  21. @height: 600px;
  23. .box2{
  24.     width: @width;
  25.     height: @height;
  26.     border: 1px solid #f00;
  27.     
  28.     div{
  29.         width: @width/2;
  30.         height: @height/2;
  31.         background: green;
  32.         
  33.         margin: (@height - @height/2)/2 auto 0 auto;
  34.         
  35.         filter: ~'alpha(opacity:50)';
  36.         // *避免编译，就把不需要编译的内容前面先加上一个~，把内容放到一对引号中
  37.     }
  38. }

posted @ 2017-01-31 10:37  CafeMing  阅读(237)  评论(0)  编辑  收藏  举报