关于less

1.在sublime安装less相关插件，ctrl+shift+p->install Package->less

或者通过npm安装 npm install less -g(前提是电脑已经安装了node.js)

2.下载koala.exe软件，将建好的.less文件拖入，右键->设置路径，保存为同名.css

页面引用.css，编辑.less，.css会与之同步

下面将一些less语法记录到style.less中

@charset "utf-8";//变量@test_width:300px;.box{width: @test_width;height: @test_width;background-color: yellow;}//混合.border_02(@border_width){border:solid yellow @border_width;}.test_hunhe{.border_02(30px);}.border_03(@border_width:10px){border:solid green @border_width;}.test_hunhe1{.border_03();}//混合.border_radius(@radius:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius: @radius;}.radius_test{.border_radius();.border_radius(10px);}//匹配模式//相当于js中的if//写三角模板.triangle(top,@w:5px,@c:#ccc){border-width: @w;border-color:transparent transparent @c transparent;border-style: dashed dashed solid dashed;}.triangle(bottom,@w:5px,@c:#ccc){border-width: @w;border-color: @c transparent transparent transparent;border-style: solid dashed dashed dashed;}.triangle(left,@w:5px,@c:#ccc){border-width: @w;border-color:transparent @c transparent transparent;border-style: dashed solid dashed dashed;}.triangle(right,@w:5px,@c:#ccc){border-width: @w;border-color: transparent transparent transparent @c;border-style: dashed dashed dashed solid;}.triangle(@_,@w:5px,@c:#ccc){width: 0;height: 0;overflow: hidden;}.sanjiao{.triangle(right,20px,red);}//匹配模式-定位.pos(r){position: relative;}.pos(a){position: absolute;}.pos(f){position: fixed;}.pipei{width: 200px;height: 200px;background: green;.pos(a);}//运算 @test_01:300px;.box_02{width:(@test_01 - 20)*5;color: #ccc-10;}//嵌套规则/* .list{}.list ul{}.list ul li{}.list ul li span{} */.list{width: 600px;margin:30px auto;list-style: none;li{height: 30px;line-height: 30px;background-color: pink;margin-bottom: 5px;padding:0 10px;}a{float:left;//&代表它的上一层选项&:hover{color: red;}}span{float:right;}}//@arguments变量 包含了所有传递进来的参数 用的不多.border_arg(@w:30px,@c:red,@xx:solid){border:@arguments;}.test_arguments{.border_arg(40px);}//避免编译、!important以及总结/* 避免编译 */.test_03{width:calc(300px-30px);width:~'calc(300px-30px)';}//important.test_important{.border_03()!important;.border_radius()!important;}