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_width: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)可以实现数值的加减乘除

   • @width: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");

       

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

Less