Less

1.Sublime Text + Koala编辑工具

1. Sublime
   • 1)Html编程工具,与一般的HTML编程工具没有什么区别
   • 2)可以设置less编程的时候使一些标签高亮有提示;
2. Koala
   • 1)Less编程工具:
     • 将我们要编译的Less文件拖拽到工具内
     • 点击文件,设置为自动编译,
     • 输出方式:
       • normal为正常模式,有缩进,
       • compress为简短模式,输出最小字节的css文件,没有缩进
     • 设置输出路径:一般都和less一个文件夹;
3. HTML中使用配置

   <link rel="stylesheet/less" type="text/css" href="styles.less" />
   <script src="less.js" type="text/javascript"></script>

2.语法详解

1. 注释
   • 1)第一种:在css中显示注释: /*注释*/
   • 2)第二种:在css中不显示注释: //注释
2. 变量
   • 1)使用@符号定义变量

   • @body_300px;
     body{width:@body_width;}

3. 混合
   • 1)普通混合

   • .border{
        border:1px solid red;
     }
     .box{
         width:30px;
         hight:30px;
         .border;
     }

   • 2)带参数的混合

   • .border(@color){
          border:1px solid @color;
     }
     .box{
         width:30px;
         hight:30px;
         .border(red);
     }

   • 3)带默认值参数的混合

   • .border(@color:red){
         border:1px solid @color;
     }
     .box{
         width:30px;
         hight:30px;
         .border(green);
     }

4. 匹配规则
   • 1)根据参数来判断使用哪个css

   • //绝对定位
     .pox(a){position:absolute;}
     //相对定位
     .pox(r){position:relative;}
     //固定定位
     .pox(f){position:fixed;}
     //所有的pox方法都要引入的css属性
     .pox(@_){width:20px;}
     
     //混合
     .box{
         .pox(r);
     }
     
     //输出的css:
     .box {
         position: relative;
         width: 20px;
     }

5. 运算
   • 1)可以实现数值的加减乘除

   • @300px;
     .body{
         width: (@width - 20)*5;// 注意(@width - 20)减号之间要有空格
     }

6. 嵌套
   • 1)嵌套的方式编写层叠样式
     • 以前:

     • #header { color: black; }
       #header .navigation {font-size: 12px;}
       #header .logo { width: 300px; }
       #header .logo:hover {text-decoration: none;}

     • 现在:

     • #header {
           color: black;
           .navigation {
               font-size: 12px;
           }
           .logo {
               width: 300px;
               &:hover {
                    text-decoration: none
               }
           }
       }    

     • 注意: & 符号代表上一层选择器,如果你想写串联选择器，而不是写后代选择器，就可以用到&了
7. @arguments
   • 1)包含所有传递进来的参数

   • .border_arg (@w:30px,@c:red,@xx:solid){
             border:@arguments;//等价于border:@w @c @xx;
     }    

8. 避免编译
   • 1)使用”~”号加上单引号和双引号来避免让less编译,原封不动的让css3来编译

   •  .test_03{
             width:~’calc(300px -30px)’;
     }

9. !important关键字
   • 1)会为所有混合所带来的样式添加上!important 

   • .test_Important{
             .border_redius() !important;
     }    

10. 命名空间
    • 1)为了更好的组织CSS,将一些变量或者混合模块打包起来,之后重复使用

    • #bundle {
          .button () {
              display: block;
              border: 1px solid black;
              background-color: grey;
              &:hover { 
                  background-color: white 
              }
          }
          .tab { ... }
          .citation { ... }
      }        

    • 只需要在 #header a中像这样引入 .button:

    • #header a {
          color: orange;
          #bundle > .button;
      }

11. 作用域
    • 1)LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

    • @var: red;
      #page {
          @var: white;
          #header {
              color: @var; // white
          }
      }
      #footer {
          color: @var; // red
      }

12. Importing
    • 1)你可以在less文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带,也可以引用.css文件

    • @import "lib.less";
      @import "lib";
      @import "lib.css";

13. 字符串插值
    • 1)变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

    • @base-url: "http://assets.fnord.com";
      background-image: url("@{base-url}/images/bg.png");

精品原创，谢谢打赏...