Lessdailyusage你需要知道的less和sass是两种css预编译语言，目的是写css文件更快更结构化。是一门强大的css编译语言，可以使用变量、运算符、判断、方法等，本文只写一些常用的方法。你需要阅读所有的帮助文档，看这里：http://lesscss.cn/features/看一个小例子写一个.btn类并支持:hover:activestyleCSS.btn{/*btninitialstyle*/}.btn:hover{/*:hoverstyle*/}.btn:active{/*:activestyle*/}Less.btn{//btninitialstyle&:hover{//hoverstyle}&:active{//activestyle}}可见less的结构比css更清晰，需要的写法也更少。下面的less会在使用中生成上面的css。而且这只是表面，保证你用less之后不会用css写样式。变量less支持变量，因为有了变量，less改变全局样式更方便。在一般用途中，颜色是最常用的。二是单位长度。@variablename:variablevalue//例如：//Colors@red:#CD594B;@yellow:#F8CE5E;@green:#4B9E65;@yellow:#5A8DEE;//Unites@btn-padding:4px;@btn-行高：26px；实际使用中：less.btn-success{background-color:@green;行高：@btn-lineheight；color:#fff;}生成css.btn-success{background-color:#4B9E65;行高：26px；color:#fff;}混合可以直接在其他类中插入其他类的内容。less.bg-yellow{background-color:@yellow;}.btn-warn{line-height:@btn-lineheight;.bg-yellow;}将生成css.bg-yellow{background-color:#F8CE5E;}.btn-warn{line-height:26px;background-color:#F8CE5E;}operatorless支持+-*/()操作，见示例@width-20:20px;@count:3;@per-10:10%;.card{width:@width-20*@数数;min-width:@per-10*7;}//注意计算时，运算符两边一定要留空格，因为可能会有横线连接变量，造成混淆。//单位less可以自动识别，不用管单位。Output.card{宽度：60px;min-width:70%;}查看less的内置函数：http://lesscss.cn/functions/#...完整的函数包括：杂项函数、字符串函数、列表函数、数学函数、类型函数,颜色定义函数,颜色通道函数,颜色操作函数,颜色混合函数这里我只说颜色的常用方法，因为其他的我现在用的不多。lighten(color,percentage)//增加颜色的亮度darden(color,percentage)//降低颜色的亮度saturate(color,percentage)//增加饱和度desaturate(color,percentage)//降低饱和度@green:#4B9E65;.green{背景颜色:@green;}.green-lighten{背景颜色:变亮(@green,20%);}.green-darken{背景颜色:变暗(@green,20%);}.green-saturate{背景颜色:饱和(@green,20%);}.green-desaturate{背景颜色:desaturate(@green,20%);}output.green{背景颜色:#4B9E65;}.green-lighten{background-color:#88c79c;}.green-darken{background-color:#2a5939;}.green-saturate{background-color:#34b55c;}.green-desaturate{背景-color:#62876e;}函数方法的使用有时候，比如你需要写一个按钮类.btn-success,.btn-danger,.btn-default,.btn-warning，如果单独定义的话，会会很麻烦，现在用方法，直接填参数就可以了。less@green:#4B9E65;@blue:#5A8DEE;@yellow:#F8CE5E;@red:#CD594B;.btn-template(@bgcolor,@fcolor:white){//定义了两个参数，第二个参数有默认值values//也就是说这个方法可以有一个或两个参数//另外带()参数的方法不会把自己渲染成css，只有调用才会渲染color:@fcolor;边框颜色：变暗（@bgcolor，3%）；背景色：@bgcolor；&:hover{颜色：@fcolor;背景颜色：变暗（@bgcolor，5%）；}&:active{颜色：@fcolor;背景颜色：变暗（@bgcolor，10%）；}}.btn-success{.btn-template(@green)}.btn-primary{.btn-template(@blue)}.btn-warning{.btn-template(@yellow)}.btn-danger{.btn-template(@red)}上面的less输出就是下面的内容，是不是很强大。btn-success{color:white;边框颜色：#46945e；背景颜色：#4B9E65;}.btn-success:hover{颜色：白色；背景色：#438d5a;}.btn-success:active{颜色：白色；背景颜色：#3b7b4f；}.btn-primary{颜色：白色；边框颜色：#4c83ed；背景颜色：#5A8DEE;}.btn-primary:hover{颜色：白色；背景公司lor:#437dec;}.btn-primary:active{颜色：白色；背景颜色：#2c6de9；}.btn-警告{颜色：白色；边框颜色：#f7ca4f；背景颜色：#F8CE5E;}。btn-warning:hover{颜色：白色；背景颜色：#f7c746;}.btn-warning:active{颜色：白色；背景颜色：#f6bf2d；}.btn-danger{颜色：白色；边框颜色：#ca4e3f；背景颜色：#CD594B;}.btn-danger:hover{颜色：白色；背景颜色：#c74737;}.btn-danger:active{颜色：白色；background-color:#b34032;}文件拆分，文件引用和js等高级开发语言一样，less也可以引用外部less文件引用格式：@import"variables.less"这样当前文件就引入了外部variables.lessvariables.less//colors@green:#4B9E65;@blue:#5A8DEE;@yellow:#F8CE5E;@red:#CD594B;//units@common-height:30px;@input-height:26px;@input-填充：4px；less主文件@import"variables.less"//主文件可以引用variables.less中的变量。学习Less最好的例子就是看bootstrap3.4的样式源码。Bootstrap3.4是用less写的下载bootstrap3.4theless源码，看看是怎么写的，进度很快。原来bootstarp4已经换成SCSS了，日常用SCSS也想换成SCSS。点这里去github查看【Bootstrap分支】，好像已经开始v5.0的开发了。
