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. */
  4. #box{
  5. width: 500px;
  6. padding: 20px;
  7. border: 1px solid #f00;
  8. &{
  9. border: 5px solid #f00;
  10. }
  11. h2{
  12. font: 20px/20px "微软雅黑";
  13. }
  14. p{
  15. color: green;
  16. }
  17. ul{
  18. margin: 0;
  19. padding: 0;
  20. list-style: none;
  21. li{
  22. height: 30px;
  23. background: #ccc;
  24. a{
  25. color: #f00;
  26. &:hover{
  27. color: blue;
  28. }
  29. }
  30. }
  31. }
  32. }
编译成的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.运算
  1. @w:300px;
  2. .box1{
  3. width: @w;
  4. height: @w+100;
  5. height: @w - 100;
  6. //* 在做减法运算的时候,一定要记着,减号前后要加上一个空格,不然就会报错
  7. border: 1px solid #f00;
  8. position: relative;
  9. left: @w*2;
  10. top: @w/3;
  11. }
  12. @width: 200px;
  13. @height: 600px;
  14. .box2{
  15. width: @width;
  16. height: @height;
  17. border: 1px solid #f00;
  18. div{
  19. width: @width/2;
  20. height: @height/2;
  21. background: green;
  22. margin: (@height - @height/2)/2 auto 0 auto;
  23. filter: ~'alpha(opacity:50)';
  24. // *避免编译,就把不需要编译的内容前面先加上一个~,把内容放到一对引号中
  25. }
  26. }

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