LESS知识总结

 

1、认识less

2、使用less

3、变量（ variables  ）

4、混合 （ mixins  ）   

5、嵌套规则 （ nested-rules  ） 

6、运算（operations）

7、函数（functions）

8、命名空间

9、作用域

10、引入（importing）

11、关键字（ important  ）

12、条件表达式

13、循环（loop）

14、合并属性

15、函数库（function）

初见less	1、什么是less less是css预编译器，可以扩展css语言，添加功能如变量、混合、函数和许多其他技术。 让css更具维护性、主题性、扩展性。 2、less官方网站 英文站 http://www.lesscss.org 中文站 http://www.lesscss.net 3、less中的注释 //    不会被编译到css文件中 /**/ 会编译到css文件中 4、less的第一次使用 ul{    background:#ff0;    li{       background:#f0f;       a{          background:#0ff;       }    } }
正确使用less	如何使用less less只有被编译后才能被浏览器识别使用。 less头部最好加上 @charset("utf-8") 。 less编译工具 Koala     http://www.koala-app.com Winless  http://winless.org CodeKit  http://incident57.com/codekit/index.html 客户端调试方式 先引用less文件"rel=stylesheet/less"; 再引用less.js文件。 注意：这时不会生成css文件，编译后的样式直接会加载在页面上。
变量	普通变量 @blue：#ff0; input{     background: @blue; } 作为选择器和属性名的变量,注意属性名必须为可用的才行。widths 这个就不能通过编译 @kuandu:width; .@{kuandu}{   @{kuandu}:150px } 作为URL的变量 @imgurl:"img/a.jpg"; header{   background: @green url("@{imgurl}bdlogo.png");   height: 500px; } 延迟加载 变量是延迟加载的，在使用前不一定要先申明。 定义多个相同名称的变量时 @var: 0; .class {   @var: 1;     .brass {       @var: 2;       three: @var; //这是的值是3   同级别中最后一个，顺序无所谓       @var: 3;     }   one: @var; //这是的值是1 }
混合	普通混合   font_hn会输出到css文件中 .font_hn{   color: red;   font-family: microsoft yahei； } h1{   font-size: 28px;   .font_hn; } 不带输出的混合，类名后面使用( )；font_hn不会在css文件中输出 .font_hn( ){   color: red;   font-family: microsoft yahei; } h1{   font-size: 28px;   .font_hn; } 带选择器的混合     &选择的是所有的父级元素 .my-hover-mixin {   &:hover {     border: 1px solid red;   } } button {   .my-hover-mixin(); } 带参数的混合 .border(@color){           //参数不带有默认值   border: 1px solid @color; } h1{   &:hover{     .border(green);    //由于没有默认值，这里必须传参，否则报错   } } 带参数并且有默认值的混合 .border_you(@color:red){   border: 1px solid @color; } h1{   &:hover{     .border_you( ); //不传参的情况下，使用的是默认red   } } 带参数并且有默认值的混合 如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值， 如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值。 .mixin(@color; @padding:xxx; @margin: 2) {   color-3: @color;   padding-3: @padding;   margin: @margin @margin @margin @margin; } .divmaizi{   .mixin(red;) } 定义多个具有相同名称和参数数量的混合 .mixin(@color) {   color-1: @color; } .mixin(@color; @padding:2) {   color-2: @color;   padding-2: @padding; } .mixin(@color; @padding; @margin: 2) {   color-3: @color;   padding-3: @padding;   margin: @margin @margin @margin @margin; } .some .selector div {   .mixin(#008000); } 命名参数 .mixin(@color: black; @margin: 10px; @padding: 20px) {   color: @color;   margin: @margin;   padding: @padding; } .class1 {   .mixin(@margin: 20px; @color: #33acfe); } .class2 {   .mixin(#efca44; @padding: 40px); } .class3{   .mixin(@padding: 80px;) } arguments .border(@x:solid,@c:red){   border: 21px @arguments; } .div1{   .border(solid); } 匹配模式 .border(all,@w: 5px){   border-radius: @w; } .border(t_l,@w:5px){   border-top-left-radius: @w; } .border(t_r,@w:5px){   border-top-right-radius: @w; } .border(b-l,@w:5px){   border-bottom-left-radius: @w; } .border(b-r,@w:5px){   border-bottom-right-radius: @w; } footer{   .border(t_l,10px);   .border(b-r,10px);   background: #33acfe; } 混合的返回值 .average(@x, @y) {   @average: ((@x + @y) / 2);   @he:(@x + @y); } div {   .average(16px, 50px);   padding: @average;   margin: @he; }
嵌套规则	什么是嵌套规则 模仿html结构，让css代码更加简洁明了清晰。 header{    width: 960px;    h1{      font-size: 18px;      color: green;    }    .logo{      width: 300px;      height: 150px;      background: darkred;      &:hover{        background: forestgreen;      }    }  } & 说明：表示当前选择器的所有父选择器。 & 插入到选择器之后，就会将当前选择器插入到父选择器之前。   .a{    .b{      .c&{        color: 123;      }    }  }  编译后   .c .a .b{       color: 123;    } 组合生成所有可能的选择器列表 p, a, li {    border-top: 2px dotted #366;    & & {      border-top: 0;    }  } 编译后    p p, p a, p li, a p, a a, a li, li p, li a, li li{      border-top: 0;  }
运算	运算说明（运算符与值之间必须以空格分开，涉及优先级时以“( )”优先） 任何数值、颜色和变量都可以进行运算； less会自动推断数值的单位，所有不必所有数值都加上单位。 .wp{   margin: 0 auto;   background: forestgreen;   width: 450px + 450;   height: 400 + 400px; } //涉及到优先级，使用()区分优先级 .wp{   margin: 0 auto;   width: (550 - 50)*2 + 24px;   height: 400 + 400px;   background:#ff0000 - 55; //#000021 c8c8c8 } //rgb模式他的值是 0~255 ，当你的值超过255 ，那么就会以255进行相加操作
函数	Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数。 .bgcolor{   background :rgb(0,133,0) ;    z-index: blue(#050506);  }    编译后 .bgcolor{    background :#008500;     z-index: 6;    }
命名空间	什么是命名空间 在less中，我们需要将一些混合组合在一起，可以通过嵌套多层id或者class实现。 #bgcolor(){   background: #ffffff;   .a{     color: #888888;     &:hover{       color: #ff6600;     }     .b{       background: #ff0000;     }   } } .bgcolor1{   background: #fdfee0;   #bgcolor>.a; } 注意：">"可以省略不写
作用域	什么是作用域 less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合。如果没找到，编译器就会在父作用域中查找，依次类推。 @clolor:#ffffff; .bgcolor{   width: 50px;   a{     color: @clolor;    //#ff0000   } } @clolor:#ff0000;
引入	什么是引入 你可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！ @import "main.less"; @import (reference) "main.less"; //引用LESS文件，但是不输出 @import (inline) "main.less"; //引用LESS文件，但是不进行操作 @import (once) "main.less"; //引用LESS文件，但是不进行操作 @import (less) "index.css"; //无论是什么格式的文件，都把他作为LESS文件操作 @import (css) "main.less"; //无论是什么格式的文件，都把他作为CSS文件操作 @import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件 @import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件 @import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件 .centen{   width:@wp;   .color; } 注意：引用.css文件，会被原样输出到编译文件中！
关键字	什么是 !important关键字 在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承!important。 .foo (@bg: #f5f5f5, @color: #900) {   background: @bg;   color: @color;   font-size: 16px;   font-weight: 900; }   .unimportant {   .foo(); } .important {   .foo() !important; } 注意：会提升所有样式的权重，尽量少用，不推荐使用。
条件表达式	>,>=,=,<=,<,true .mixin (@a) when (lightness(@a) >= 50%) {   //255/2=127.5   background-color: black; } .mixin (@a) when (lightness(@a) < 50%) {   background-color: white; } .mixin (@a) {   color: @a; } .class1 { .mixin(#7e7e7e) }  //221  > 127.5  >50%  background-color: black;  7e7e7e  =  126 .class2 { .mixin(#808080) }  //85 <127.5  <50%   background-color: white;  808080 = 128 类型检查函数 可以基于值的类型来匹配函数       iscolor       isnumber       isstring       iskeyword       isurl   .mixin (@a) when (iscolor(@a)) {   background-color: black; } .mixin (@a) when (isnumber(@a) ) {   background-color: white;   shuzi:shuzi; } .mixin (@a) {   color: @a; } .class1 { .mixin(#7e7e7e) }  //background-color: black; .class2 { .mixin(123) }  //background-color: white;   单位检查函数 可以基于值的类型来匹配函数       ispixel       ispercentage       isem       isunit   .mixin (@a) when (ispixel(@a)) {   background-color: black; } .mixin (@a) when (ispercentage(@a) ) {   background-color: white; } .mixin (@a) {   width: @a; } .class1 { .mixin(960px) }  //background-color: black; width:960px .class2 { .mixin(95%) }  //background-color: white;width:95%
循环	在less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构. .loop(@counter) when (@counter > 0) {   .loop((@counter - 1));    // 递归调用自身 4 3 2 1 0   width: (10px * @counter); // 每次调用时产生的样式代码30px 20px  10px }   div {   .loop(3); // 调用循环 }   .loop(@counter) when (@counter > 0) {   h@{counter}{     padding: (10px * @counter);   }// 每次调用时产生的样式代码   .loop((@counter - 1));    // 递归调用自身 }   div {   .loop(6); // 调用循环 }
合并属性	"+"逗号分隔所合并的属性值 在需要合并的属性的：的前面加上+就可以完成合并，合并以，分割属性   //+ 合并以后，以逗号分割属性值 .mixin() {   box-shadow+: inset 0 0 10px #555 ; } .myclass {   .mixin();   box-shadow+: 0 0 20px black; }   //+_ 合并以后，以空格分割属性值 .a(){   background+:#f60;   background+_:url("/sss.jod") ;   background+:no-repeat;   background+_:center; } .myclass {   .a() } //background+_:#f60 url("/sss.jod");   注意：当前使用的是哪个，就以这个想加。