Less使用

Less

Less是一门css预处理语言，他扩展了css语言，增加了变量、Mixin、函数等特性，使css更容易维护和扩展。他不是一个直接使用的语言，而是一个生成css的语言。Less可以运行在Node或浏览器端。

安装:npm install -g less
使用:lessc *.less > *.css    

1、 初识变量

• @name : value；，value会原模原样的输出，不要忘记最后的引号
• 选择器和属性名都可以使用变量格式为：@{name}，可以在前后添加内容
• 当变量在字符串中出现时格式为："@{name}……"
• 可以将#或者.开头的选择器在通过#name()或者.name(直接使用,带不带括号都可以）
• 可以使用一个变量作为另一个变量的name，@@name，则@name将的value将变成引用该变量的name
• value可以是一个具体值，也可以是一个属性集
• 变量也可以进行四则运算，并且计算时不会将非数字内容参与运算，例如100px+1=101px，此处100px也可以是变量
• 变量会遵循就近原则，你可以直接在属性集或者函数中定义变量覆盖外部变量

1.1、属性名、属性值

  声明：@border-name:border;
  	   @border-value:1px solid red;
	   @a:1px;@b:solid;@c:red;
	   @bc:{background:red;};
  使用：@{border-name}:@border-value;
	   border: @a @b @c;
	   @bc();

1.2 、url变量（需要加引号）

  声明：@images: "../img";
  使用：background-image: "@{images}/1.jpg";

1.3 、单个或多个属性集

  声明：@style-list:{background:red;color: white};
  使用：@style-list();

1.4、变量的变量

  声明：@front:  "xixi";
    	 @current: "front";
  使用：width:@@current; // "xixi"

​ 1.5、选择器变量

• 选择器的变量在使用的时候需要添加大括号（{}）
• 变量的前面可以添加选择操作符。

声明：@name:main;
使用：@{name}{}
	 #{name}{}
	 .{name}{}

​ **1.6、变量运算：**可以对变量进行四则运算

• 进行减法运算时两边必须有空格，也可以使用+（-n）的格式
• 也可以对颜色进行运算
• 变量和变量之间也可以进行运算
• 对于除法运算必须在大括号内进行

声明：@width:300px;
	 @color:#111;
	 @height:80;
使用：width:(@width + 1 - 1 )*2; => 600px
	 color: @color+#222; => #333333
	 height:@height*1%; => 80%
	 height:(@width/2) => 150px

2、嵌套

2.1、普通

a{
  #b{
    .c{
      color: red; // a #b .c{}
    }
  }
  div{}   => a div
  >div{}  => a > div
}

2.2、&符号

• 代表上一层选择器的名字，该符合会忽略选择器之间的空格
• 伪类常使用

#header{
	.title{ 	// #header .title
		font-weight:bold;
	}
	&.title{ 	// #header.title 
		font-weight:bold;
	}
}

2.3、媒体查询

body{
  background-color: yellow;
  @media screen {
    @media (max-width: 768px) {
        background-color: red;
         >div{color: red;}
    }
    @media (max-width: 612px) {
        background-color: blue;
    }
  }
}
编译后
body {
  background-color: yellow;
}
@media screen and (max-width: 768px) {
  body {
    background-color: red;
    body > div {
    	color: red;
 	}
  }
}
@media screen and (max-width: 612px) {
  body {
    background-color: blue;
  }
}

3、函数

• 格式：.name(@arg1:10px,...args){},函数的参数都使用变量的形式，函数名不允许含有变量，函数会存在提升
• 函数可以指定默认值，当无参数时使用，如果不指定，则必须传所有
• 当参数都有默认值或无参时，使用函数可以不写()
• 当参数不确定的时候可以使用...代替，在调用时使用@arguments获取全部，类似js的...
• 函数可以重载，即重名但参数个数不一致
• 当函数重复时，即重名重参会按照定义顺序以此调用
• 参数也可以是具体的字符串（无需引号），然后调用的时候传入该字符串，@_代表任意字符
• 只要在方法名后面加!important，则所有的为加上该属性的都会被加上!important

声明：.setSize1(@a,@b){
     	 width:@a;
         height:@b;
     }
     .setSize2(@a,@b:55px){ }
	 .setSize3(@a:110px,@b:55px){}	
     .setSize4(...){
     	 border: @arguments;
         width:  @a;
     }
 	.setSize5(left){}
    .setSize5(right){}
    .setSize5(@_){}
使用：.setSize1(110px,20px) 
	 .setSize2(110px)
	 .setSize3(11px,5px)
	 .setSize3(11px)
	 .setSize3()
	 .setSize3
 	 .setSize4(1px,solid,red);
	 .setSize5(right) //调用 .setSize5(right)和.setSize5(@_)

• 函数后面是可以加条件的 when condition ……，其中AND,,,not分别代表与或非，当不符合条件是不会输出的
• 比较运算有： >,>= ,=, =<, <，= 代表的是等于

.if(@width,@height) when not (@width<100px),(@height>100){
  width: @width;
  height: @height;
}
只要@width或者@height有一个大于100px即输出属性集

• 尽管less没有提供循环的方法，但我们可以借助递归实现

.loop(@n,@i:1) when (@i <= @n){
	.md-@{i}{
		margin-bottom: 1rem*@i;
	}
	.loop(@n,@i+1);
}
.loop(10);

4、其他

4.1、！important

• 方法后添加了important，相当于这个方法中的每一个属性都设置了一遍important

4.2、@import

• 使用@import "name",将会自动导入命名为name的.less文件，也可以导入css，那便是css语法了
• 导入之后当前less文件就可以使用导入文件得变量、函数等操作了
• @import后是可以跟修饰的，@import (修饰) "name"
  • reference：会引入但不会修饰
  • once：相同的文件只引入一次（默认），同一个css只会生成一次
  • multiple：允许导入多个同名文件，会生成相同的css

4.3、同名属性拼接

• +代表的是逗号

• +_代表的是空格

.border(){
  border+_: 1px;
}
main{
  box-shadow+: inset 0 0 10px #555;
  box-shadow+: 0 0 20px black;
  .border();
  border+_: solid red;
}
编译后
main {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
  border: 1px solid red;
}

4.4、继承

• 使用&:extend(……选择器)可以实现继承，相当于在需要继承的选择器后面加上当前选择器，而方法则是引入到当前属性集中
• 默认值不会继承选择器中子选择其的属性，如果想要继承的话可以在需要的选择其后加上all

.border{
  border: 1px solid red;
  .img{
    max-width: 10px;
  }
}
div{
  .border;
  width: 100px;
}
div{
  &:extend(.border);
}
// div:extend(.border){}和上面是等价的
编译后
.border, div {
  border: 1px solid red;
}
// 如果使用&:extend(.border all); 那么下列变成.border .img, div .img
.border .img { 
  max-width: 10px;
}
div {
  border: 1px solid red;
  width: 100px;
}

4.5、内置方法

详见官网：http://lesscss.cn/functions/

• percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
• round(number, [places: 0]); // 四舍五入取整，类似还有ceil、floor、sqrt、abs、pow等
• isnumber(value);// 判断是不是数字
• ……

  height: percentage(0.1); // 10%
  width: round(0.5); // 1
  width: isnumber(100px) ; // true
  width: isnumber(red) ; // false
  color: iscolor(red); // true