Less | Bill’s Blog

初识

bootstrap 3.0 使用 Less， bootstrap 4.0 使用 SASS
SASS 使用的是 ruby 编写的
less 既可以在客户端上运行，也可借助 Node.js 在服务端运行
1. less 脚本(运行时编译，即在客户端进行编译)
  1. link rel=’stylesheet/less’ type = ‘text/less’ href=’a.less’
2. node 上安装 less模块
  - 查看less的所有版本
    - cnpm view less versions
  - 安装
    - cnpm install -g less
  - 使用
    - lessc 指定less文件 css文件
    - lessc -x .less文件目标文件压缩方式
3. Koala
  - 使用 <a href =”www.koala-app.com’>Koala 编译 less * 实时的，任何软件修改 less 文件，都会影响 CSS 的编译
  - 把 CSS 文件所在目录拖进 Koala
4. node 上 gulp-less
  - http://www.ybao.org/book/less/5508.html
更多关于LESS的信息

注释

//
- 不会编译到 CSS 文件中去
/* */
- 这里的注释会被保留到 CSS 文件中
- 因为 CSS 中的注释就是这种

变量

使用 @ 来声明一个变量：@color:pink;
作为普通属性值来使用：@color
作为选择器和属性名：#@{selector的值}
1. 插值
???作为URL： @{url}
变量的延迟加载

作用域：

局部作用域
全局作用域
块级作用域

  1.
  @color:#f40;
  调用
  *{
      color:@color;
  }

  2.
  @m:margin;
  调用
      * {
          @{m}:0;
          }

  3. 将它的值作为字符串使用要使用{}
  @selector:#wrap;
  调用
  @{selector}{
      color:red;
  }

甚至可以用变量名定义为变量

  .sty{
      @color:#f00;
      /* 这里是 有引号的 */
      @mycolor:'color';
      background-color:@@mycolor;
  }

LESS 中的变量为完全的 “常量” , 所以只能定义一次 ???

变量的延迟加载
- 延迟加载：变量是延迟加载的，在使用前不一定要预先说明。
- 意思是指：在前面使用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。
```
  @var:0;
  .class {
      padding:@var;   //0 
      .brass{
              @var:2;
              margin:@var;//3
              @var:3;
      }
  }
```

注意

在css中重写比如说类，只是将重写的属性覆盖，而 less 是将这个类全部覆盖

  .one{
      width:100px;
      height:100px;
      background:red;
  }

  .one{
      width:200px;
  }

嵌套规则

基本嵌套规则
& 这个符号起到继承的作用，就是他的父级标签
```
  #wrap{
      .inner{
          width:200px;
      }
  }
```

less中的混合 (Mixins,混入)

不论混合定义时有没有(),使用的时候均可以带上(),或者不带();
混合可以将一个定义好的 class A 轻松引入到一个 class B 中，从而简单实现 class B 继承 class A 中所有属性

基本混合(只有基本混合是会将 “混合”的定义输出到 CSS 文件中的,只要带小括号就不会)
使用 . 的形式

@orange: orange;

.base{
    font-size: 30px;
    color: @orange;
}

h1{
    border: 1px solid red;
    .base;
}

编译后的css:

.base {
  font-size: 30px;
  color: #ffa500;
}
h1 {
  border: 1px solid red;
  font-size: 30px;
  color: #ffa500;
}

自身不会输出的混合，类名后面使用();(这个混合定义不会输出到 css 文件中去)

@pink: pink;

.base2(){
    border: 1px solid blue;
    background: @pink;
}
footer{
    .base2;
}

编译后的css:
footer {
  border: 1px solid blue;
  background: #ffc0cb;
}

带选择器的混合

.hoverMix(){
    &:hover{
        border: 1px solid green;
    }
}

button{
    .hoverMix;
}

编译后的css:

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

带参数的混合

@gray: #555;
.border( @color ){
    border: 1px solid @color;
}

h1{
    .border( @gray );
}

编译后的css:

h1 {
  border: 1px solid #555555;
}

带参数并且有默认值的混合像这样给参数设置默认值。有了默认值，我们可以不用设置属性值也能被调用。

.border2( @color:red ){
    border: 1px solid @color;
}

h2{
    .border2();
}
h3{
    .border2( @pink );
}

编译后的css:

h2 {
  border: 1px solid #ff0000;
}
h3 {
  border: 1px solid #ffc0cb;
} 

定义多个 “具有相同名称” 和 “参数数量不同” 的混合
- 从编译的结果可以看出，less也有函数重载的特性。当我们定义相同混合属性名，参数不同，然后.mixin(#008000);调用，第一和第二混合都能匹配，但是第三个缺少参数@padding的值，所以不会引用第三个混合属性。

.mixin2(@color) {
  color-1: @color;
}
.mixin2(@color; @padding:2) {   //padding有默认值
  color-2: @color;
  padding-2: @padding;
}
.mixin2(@color; @padding; @margin: 2) { //padding未赋值
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

.some .selector div {
  .mixin2(#008000);
}

编译后的css:

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

命名参数引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用，这样就不必按照任意特定的顺序来使用参数；

.mixin3(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin3(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin3(#efca44; @padding: 40px);
}

编译后的css:

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

@arguments变量 @arguments代表所有的可变参数。

用于mixin的复合属性

注意事项： 1. @arguments代表所有可变参数，参数的先后顺序就是你的（）括号内的参数的先后顺序。 2. 在使用的赋值，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值赋值给第三个……以此类推，但是需要注意的是假如我想给第一个和第三个赋值，你不能写（值1，，值3），必须把原来的默认值写上去！

.border3(@x:solid,@c:red){
  border: 21px @arguments;
}
.div1{
  .border3(dashed);
}

编译后的css:

.div1 {
  border: 21px dashed #ff0000;
}

匹配模式

传值的时候定义一个字符，在使用的时候使用哪个字符，就调用那条规则。

.triangle(@_){//@_ 表示公用代码块,每次调用下面的匹配时，都会调用这个公共代码块
    width: 0px;
    height: 0px;
}

@\_ 只能应用于 匹配模式，即 .类名(标识符,.... 的模式下

参数也写上 .triangle(@_,@width:50px,@color:red){ width:0; height: 0; border-style:solid; border-color:transparent; }

.triangle(T,@width:50px,@color:red){ border-width:@width; border-top-color:@color; }

.triangle(R,@width:50px,@color:red){ border-right-color:@color; } .triangle(B,@width:50px,@color:red){ border-bottom-color:@color; } .triangle(L,@width:50px,@color:red){ border-left-color:@color; }

.one{ .triangle(R); }

## 混合的返回值 

在使用混合时，有时会用到一些运算，这时就有返回值。

混合中定义的变量在用的时候都可以直接拿来用

.average(@x, @y) { @average: ((@x + @y) / 2); @he:(@x + @y); }

footer{ .average(16px, 50px); padding: @average; margin: @he; }

编译后的css:

footer { padding: 33px; margin: 66px; }

## 关键字!important 
在使用混合属性后面加上!important关键字，则混合中的所有属性都会加上关键字!important。

.fool(@bg:#333;@color: orange){ background: @bg; color: @color; }

.unimportant{ .fool; } .important{ .fool !important; }

编译后的css:

.unimportant { background: #333333; color: #ffa500; } .important { background: #333333 !important; color: #ffa500 !important; }

* 不带参数
* 带参数，无默认值
* 带参数，有默认值


## 计算
* 有一方有单位即可

* 加,减,乘,除

    ```
    .bordered{
        width:10 + 10px;
    }    
    ```

## 导入
* @import "a.less";

## 继承 extend
1. 被继承的类不能带有(),只能被输出了,有()的话，不会报错，但是 extend 无效, 即子元素不会集成父元素
1. extend(祖先文件) 关键字
1. extend(祖先文件 all) 关键字
    * 祖先文件其他的状态，比如 :hover
1. 继承被附在选择器后面或放置在规则集

    ```
    .parentClass{
        color:red;
    }
    .subClassOne{
        &:extend(.parentClass);
    }
    .subClassTwo:extend(.parentClass){
        
    }
    ```

1. 继承嵌套（nested）选择器
    
    ```
    .parentClass{
        span{
            color:red
        }
    }
    .subClassOne{
        &:extend(.parentClass span);
    }
    编译为：
    .parentClass span,
    .subClassOne {
      color: red;
    }
    ```
1. extend继承的选择器名不能包含变量
    ```
    @myClass:.redColor;
     
    @{myClass}{
        color:red;
    }
    .class{
        color:red;
    }
    .subClass:extend(.redColor){}   //extend参考的选择器名在参考处为变量，错误
    .subClass:extend(@{myClass}){}  //extend内选择器名为变量，错误。
    @myClass:extend(.class){}       //不是上面两种情况，无错。
    ```
1. 同一个媒体查询（@media）内可被继承

@media print { .screenClass:extend(.selector) {} // extend inside media .selector { // this will be matched - it is in the same media color: black; } } .selector { // ruleset on top of style sheet - extend ignores it color: red; } @media screen { .selector { // ruleset inside another media - extend ignores it color: blue; } } 编译为： @media print { .selector, .screenClass { color: black; } } .selector { color: red; } @media screen { .selector { color: blue; } } 说明：并非内外部优先级问题，实际编译可知，若将媒体查询print内部的.selector去掉，仍然无法继承外部的.selector。


1. Duplication（重复）问题

.class1,.class2{ color:red; } .class3:extend(.class1,.class2){}

注意：class1与class2是用逗号隔开，属于分组查询，所有不会有上面的第2条。编译为：

.class1, .class2, .class3, .class3 { color: red; }

**可见继承于分组选择器将是每个都单独继承。对于此处class1与class2完全一样的情况，extend内只写一个即可，不存在匹配问题。**

### 继承实际上是将当前的选择器名以分组形式添加到被继承的选择器处，所以当既有继承又有自身样式时，应注意被继承的选择器的位置。

1. 被继承的选择器在前面

.parentClass{ color:red; } .subClass{ color:blue; &:extend(.parentClass); border:1px solid blue; } 编译结果，因为位置原因，与预期不一致，此时此例中继承没达到目的： .parentClass, .subClass { color: red; } .subClass { color: blue; border: 1px solid blue; }


1. 被继承的选择器在后面

.subClass{ color:blue; &:extend(.parentClass); border:1px solid blue; } .parentClass{ color:red; }

.subClass { color: blue; border: 1px solid blue; } .parentClass, .subClass { color: red; } ```

避免编译

calc
padding: ~’calc(100px+100)’ 当做一个字符串了

内置函数

lighten(@color,10%);
darken
unit(变量,单位)
```
 @height:200;
 height:unit(@height,px);
```
@width:200px; unit(@width) 返回 200

unit() 就是有单位，无单位转换
round 四舍五入
ceil ceil(unit(3.1));
floor floor(unit(9.9,px));
percentage @num:.32; percentage(@num);

abs @a:-2; abs(@a);

 @bg-color:red;
 @height:9.1;
 @touming:.4;

 div{
     background:@bg-color;
     height:ceil(unit(@height,px));
     width:percentage(@touming);
 }

when

.width(@min-width) when(@min-width>100) { width:@min-width; background:red; } .width(@min-width) when(@min-width>200) { width:@min-width; background:green; }

.box(){ .width(201px);//也可以带单位，貌似是自动调用了unit函数吧 }

convert 单位转换(必须是能转的啊,比如 rem 这种就转不了了)

width: convert(10px,’mm’);