less学习笔记

1. 两种注释方法

  (1)  /**/   该方法在less转化为css时会显示
  (2)  // 该方法不会在css中显示

2. 变量：使用 @ 定义

 @color : red;   /* 1.定义普通变量 */
 @m : margin;   /*  2.将属性定义为变量，调用时用{}包裹，不常用 */
 @s : 'http://127.0.0.1';    /*  3.作为url前缀 */
 #main {   /*  4.变量会延迟加载 */
    @var : 0 ;
    background-color : @color;
    @{m} : 0;
    background-img : url('@{base}/img/2.jpg');
    .inner {
        @var : 2;
        three: @var;  /*   3   */
        @var : 3;
    }
 }

3. 嵌套规则：父子层关系，使用 &

#body {
  width: 300px;
  height: 300px;
  background-color: @color;
  display: flex;
  justify-content: center;
  align-items: center;
  .inner {
    width: 100px;
    height: 100px;
    /* 使用&时：#body .inner:hover */
    &:hover {
      // &代表#body .inner
      background-color: red;
    }
    /* 不使用&：#body .inner :hover */
    :hover {
      background-color: red;
    }
  }
}

4. 混合：代码重用

• 普通混合：会被编译为css

.center {
  position: absolute; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: red;
}

• 不带输出的混合：使用()，此时不会被转化为css

.center () {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: red;
}

/* 调用 */

#top {
  .top1 {
    .center  // 直接调用即可;
  }
  .top12 {
    .center;
  }
}

• 带参数的混合

.left (@t,@l,@b,@r) {
  position: relative;
  top: @t;
  left: @l;
  bottom: @b;
  right: @r;
}
/* 调用 */
#wrap {
  .left(100px, 100px,100px,100px);
}

• 带参数且有默认值的混合

.content (@l,@r,@t:10px,@b:10px) {
 /* 带默认值必须放置于后面 */
  position: relative;
  top: @t;
  left: @l;
  bottom: @b;
  right: @r;
}
#inner {
  .content(50px, 50px);
}

• 命名参数

#outter {
  /* 命名参数，可以无视放置位置 */
  .content(@r:20px,@l:60px,@t:10px);
}

• 匹配模式

.main (@_) {
  /* 存放公共属性 */
  width: 0;
  height: 0;
}
/* 四个方向 */
.main (L,@w,@c) {
  border-width: @w;
  border-style: solid;
  border-color: transparent transparent transparent @c;
}
.main (R,@w,@c) {
  width: 0;
  height: 0;
  border-width: @w;
  border-style: solid;
  border-color: transparent @c transparent transparent;
}
.main (T,@w,@c) {
  width: 0;
  height: 0;
  border-width: @w;
  border-style: solid;
  border-color: @c transparent transparent transparent;
}
.main (B,@w,@c) {
  width: 0;
  height: 0;
  border-width: @w;
  border-style: solid;
  border-color: transparent transparent @c transparent;
}

#inner {
  .main(B,@w:40px, @c: red); /*  匹配模式，使用@_存放公共方法 */
}

• arguments变量：替代书写变量

.border-radius (@x:0,@y:0,@blur:1px,@color:red) {
  box-shadow: @arguments;/* 省去了写参数的步骤，直接使用arguments作为替代 */
  -webkit-box-shadow: @arguments; /* 兼容写法 */
  -moz-box-shadow: @arguments;
}
/* 调用 */
#bor {
  .border-radius(2px,5px,15px,green);
}

5. 运算：仅需一方带单位即可

#container {
  width: 100px;
  height: 100px;
  .border-radius(2+15px, 5px, 15px, red); // box-shadow: 17px 5px 15px red;
}

6. 引入文件：@import ‘路径’
   @import ‘…/1.less’

7. less继承 :extend 继承方法不支持带参数 所有的继承都必须在选择器的末尾。

.toper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: red;
}

.border:extend(.toper) {   /* border自身的属性  */
  width: 100px;
  height: 100px;
}

8. 原样输出：~

#con{
  height: 100px;
  height: 100px;
  margin: 10px;
  border-width: ~"50+10px";  /* 进行原样输出 */
}