less学习

1、什么是less？

是一个css预编译器，可以扩展css语言，添加功能如允许变量，混合、函数和许多其他的技术，让你的css更具有维护性、丰富性、扩展性。

2、初识less

.content ul {}              // 在css中的用法
.content li {}
.content li a {}

.content {                 // 在less中的写法
    ul {}
    li {
	a {}
	}
}

less文件后缀为.less

3、注释

（1）// ：不会编译到css文件中

（2）/**/：会编译到css文件中

4、使用less：less文件只有再被变异后才能被浏览器识别使用

（1）less编译工具：koala，下载安装后拖入.less文件，执行编译编译成.css文件，地址：http://koala-app.com/

（2）客户端调试方式（注：在服务器上打开）：

首先引入.less文件，

<link rel="stylesheet/less" type="text/css" href="styles.less" />

然后引入less.js文件，下载地址和上面一样，注意less.js文件一定要在.less文件之后，下载地址：

https://github.com/less/less.js，只需要disk下面的.less.js

5、变量

（1）普通变量：定义方式@变量名

@blue:#ffffff;
header {
    background: @blue;
}

（2）作为选择器和属性名：使用时@{变量名}

<header class="width"></header>

@w:width;        // 既是选择器又是属性名
.@{w} {
    @{w}: 150px;
}

（3）作为url的变量：使用“”将变量括起来，同样用@{变量名}的方式使用

@myUrl: "http://www.xx/images";

body {
    background: url("@{myUrl/logo.png}");   // 使用了"@{变量名/图片名}"
}

（4）延迟加载：变量无论放在前面还是在末尾，没有影响

（5）定义相同的变量名，根据相同作用域下最后定义的

.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;        // == 3
        @var: 3;
    }
    one: @var;          // == 1
}

6、混合：将一系列属性从一个规则集引入（混合）到另一个规则集的方式

（1）编译后，css文件中也会输出.font_fn

.font_fn {
    color: red;
}
h2 {
    font-size: 25px;
    .font_fn;           // 直接将类font_fn引入
}
h3 {
     font-size: 10px;
    .font_fn;
}

（2）混合不输出：css文件中不会有font_fn

.font_fn() {      // 加个括号
    color: red;
}
h2 {
    font-size: 25px;
    .font_fn;           // 直接将类font_fn引入
}
h3 {
     font-size: 10px;
    .font_fn;
}

（3）带选择器的混合

.my-hover() {
	&:hover {                  // &:hover == .my-hover:hover
		border: 1px solid red;
	}
}
button {
	.my-hover;
}

button:hover {
  border: 1px solid red;
}

（4）带参数的混合：相当于函数传值

.border(@color) {                  
	border: 1px solid @color;
}
h1 {
	.border(#ccc);              
}

（5）带有默认值的参数混合

.border(@color:#fff) {
	border: 1px solid @color;
}
h1 {
	.border();             // 不加参数，默认为#fff
}

（6）多个参数

.maxin(@color; @padding:xxx; @margin: 2px) {
	color: @color;
	padding: @padding;
	margin: @margin;
}
.div {
	.maxin(#ddd; 2px; 3px);       // 多个参数以分号分隔，若是逗号和分号混合，分号之前的都是一个参数，.mixin(1,2,3;) == color:1,2,3
}                                     // .minin(1,2,3) == color:1;padding:2;margin:3;

.minin(@color) {                     // 混合名称相同
	color: @color;
}
.minin(@color; @padding:2) {         // 有默认参数
	color-2: @color;
	padding: @padding;
}
.div {
	.minin(#fff);               // 两个都执行，
}

等于

.div {
  color: #ffffff;
  color-2: #ffffff;
  padding: 2;
}

（7）命名参数

.text1(@color:black; @padding:2px) {
	color: @color;
	padding: @padding;
}
.text1Div {
	.text1(@padding:30px);      // 通过命名参数传递
}

.text1Div {
  color: #000000;
  padding: 30px;
}

（8）可变参数arguments：所有的参数

.text2(@x:solid;@y:red) {
	border: 1px @arguments;
}
.text2Div {
	.text2();
}

.text2Div {
  border: 1px solid #ff0000;
}

（9）匹配模式：传值的时候定义一个字符，使用那个字符，调用哪条规则

.text3(all, @w:2px) {
	border-radius: @w;
}
.text3(tl, @w:2px) {
	border-top-left-radius: @w;
}
.text3Div {
	.text3(tl, 3px);
}

.text3Div {
  border-top-left-radius: 3px;
}

（10）混合的返回值

.text4(@x:16; @y:18) {
	@avg:( (@x+@y)/2 );
}
.text4Div {
	.text4();          // 调用text4返回@avg，在使用@avg
	padding: @avg;
}

.text4Div {
  padding: 17;
}

7、嵌套

.content ul {}              // 在css中的用法
.content li {}
.content li a {}

.content {                 // 在less中的写法
    ul {}
    li {
	a {}
	}
}

.text4 {
	.logo {
		&:hover & {                                     // & == 父元素
			border: 1px solid #ccc;
		}
	}
}

.text4 .logo:hover .text4 .logo {
  border: 1px solid #ccc;
}

8、运算：运算符和值必须以空格分开，任意一个值加单位

.text5 {
	width: 450px + 450;
}

.text5 {
  width: 900px;
}

颜色运算先转换为rgb，在转换为16进制返回，当大于255，也是==255，当使用red时不能运算

.text6 {
	color: #000000 + 21;    // (0, 0, 0) + (21, 21, 21)
}

.text6 {
  color: #151515;
}

9、命名空间

#text7() {
	background: #fff;
	.a {
		color: #888;
		&:hover {
			color: #ff6600;
		}
		.b {
		background: #ff0000;
		}
	}
	
}
.text7Div {
	background: #fdfee0;
	#text7>.a;                                  // 使用大于号，选择使用哪一个
}
.text7Div2 {
	#text7>.a>.b;                               // 可以省略大于号，换成空格
}

.text7Div {
  background: #fdfee0;
  color: #888;
}
.text7Div:hover {
  color: #ff6600;
}
.text7Div .b {
  background: #ff0000;
}
.text7Div2 {
  background: #ff0000;
}

10、引入：引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用

@import "main";                  // 引入main文件，不用加后缀

引入.css文件，会原样输出到编译后的文件中

@import "index.css";  

@import (reference) "main";    // 不会输出到css文件中
@import (inline) "main";       // 原样输出，不能操作，即不能使用变量，混合
@import (once) "main";         // 只执行一次，默认值
@import (less) "main";         // 将任何文件都作为less文件
@import (css) "main";          // 将任何文件都作为css文件
@import (multiple) "main";     // 允许多次引用相同的文件名，引入几次，就会执行几次

11、条件表达式

.text8(@a) when (lightness(@a) >= 50%) {          // 亮度，以百分比的形式，越接近255越亮，当大于50%时，背景为黑色
	background: black;                        // iscolor();是颜色   isnumber()是数字, isstring()是字符，iskeyword()是关键字，isurl()是路由
}                                                 // ispixel()是像素，ispercentage()是百分比
.text8(@a) when (lightness(@a) < 50%) {
	background: white;
}
.text8(@a) {
	color: @a;
}
.text8Div {
	.text8(#ddd);
}

.text8Div {
  background: black;
  color: #dddddd;
}

12、loop循环

.text9(@counter) when (@counter > 0) {
	.h@{counter} {
		padding: (10px * @counter);
	}
	.text9(@counter - 1);          // 递归调用
}
.text9Div {
	.text9(5);
}

.text9Div .h5 {
  padding: 50px;
}
.text9Div .h4 {
  padding: 40px;
}
.text9Div .h3 {
  padding: 30px;
}
.text9Div .h2 {
  padding: 20px;
}
.text9Div .h1 {
  padding: 10px;
}

13、合并

.text10() {
	box-shadow+: inset 0 0 10px #ccc;        // 使用加号，合并时以，号分割
}                                                // 使用+_  合并时以空格分开
.text10Div {                                     // 先+后+_为空格，先+_后+为逗号分割，以后面的为准
	.text10;
	box-shadow+: 0 0 20px #555;
}

.text10Div {
  box-shadow: inset 0 0 10px #ccc, 0 0 20px #555;
}

14、函数

（1）color()：将代表颜色的字符转换为颜色值 color('#777') == #777777

（2）convent()函数：将数字从一中类型转换到另一种类型convent(20cm, px)

（3）data-url()函数：将图片转换为base64位

（4）unit()函数：转换单位，unit(100px, cm)

（5）escape()函数：对特殊的URL进行编码处理，escape("123=abc")

（6）e()函数：避免处理，原样输出，可以用~“值”代替，e(值)

（7）replace()函数：replace("hello world", "world", "less"); == "hello less"替换

（8）length()函数：返回集合中的值得条数，length(1px solid #ccc) == 3

（9）extract()函数：提取

.text11 {
	@list: 'A', 'B', 'C';
	n: extract(@list, 1);     // == n:'A'
}