前端进阶-less

Less

安装: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即输出属性集
  

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、内置方法

• 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