less 里面的注释分为在编译之后仍然显示和在编译以后不显示两种

/* 我在编译之后仍然显示 */ css中的注释，内容会被解析到css文件中 // 我在编译之后不显示
less中的单行注释，注释中的内容不会被解析到css中

• less 中使用 \@ 来定义变量
• less 中的变量是块级作用域

@color:pink;

• 选择器和属性名同样可以作为变量 (但是这种形式用的很少)

@m: margin;
@selector: #wrap;
* {
  // 使用的时候要加大括号
  @{m}: 0;
}
@{selector} {
  color: pink;
}
// 网址在使用的时候也要加大括号
@image: "../image";
div {
  background: url("@{image}");
}

• 变量的延迟加载 (变量提升)：less 会等到块级作用域加载完成才会替换里面的变量

div { //可以先使用后定义 z-index: @var; @var: 3; } // z-index 属性值为 3

• 变量发生重名时，会优先使用比较近的变量

@d: 200px;
@d: 300px;
@h: 200px;
@h: 300px;

div {
  // 变量发生重名时，会优先使用比较近的变量
  @d: 115px;
  width: @d; //此处使用115px
  height: @h; //此处使用115px
  //可以在变量声明前就使用变量
  @h: 115px;
}

• 其实 css3 中也支持变量，以两个横线开头定义一个变量--

html {
  /* css原生也支持变量的设置 */
  --color: #ff0;
  --length: 200px;
}

新版本语法$

div {
  width: 300px;
  // 新版的语法
  height: $width;
}

• css3 的变量详解

• 父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)

#father {
  color: pink;
  .inner {
    color: purple;
  }
}

• 假如要让 子元素 .inner 添加一个 hover 属性

  & 表示父类的名称

#father {
  color: pink;
  .inner {
    color: purple;
    // 不能直接在里面写 :hover,这样写他会直接变成inner的子元素
    // 要这样写
    &:hover {
      background: pink;
    }
  }
}

• 混合是为了避免大量重复的样式代码，可以将一部分样式打包成代码块 (长得很像函数)

// 可以传参，即使没有参数也要加括号，加了括号后在 css 文件中不会显示
.template(@w,@h) {
  color: pink;
  width: @w;
  height: @h;
}
div {
  // 上面的样式就添加到里面了
  .template(100px,100px);
}

• less 混合支持默认参数，例如：

.template(@w:100px,@h:200px) {
  color: pink;
  width: @w;
  height: @h;
}
div {
  // 这时里面可以不用传参数
  .template();
}

• less 也支持命名参数，解决了参数不匹配的问题

.template(@w:100px,@h:200px,@c:pink) {
  color: @c;
  width: @w;
  height: @h;
}
div {
  // .template(black);
  // 显示错误，w 参数把 black 接收了过去，导致显示错误
  .template(@c:black);
  // 正确写法
}

小知识：haslayout：是 ie6 版本之前的兼容性问题，可以开启 haslayout 来解决兼容性问题 开启的方法：overflow: hidden

• less 匹配模式：例如想要弄四个方向的三角型，可以在函数的第一个参数上弄一个标识符，然后就可以定义四个混合，这时就可以根据传入的参数来判断想要用的是哪个方向的三角型

// 向左的三角型
.template(L,@w:100px,@h:200px,@c:pink) {
  // 假如里面是画三角型的方法
  color: @c;
  width: @w;
  height: @h;
}
// 向右的三角型
.template(R,@w:100px,@h:200px,@c:pink) {
  // 假如里面是画三角型的方法
  color: @c;
  width: @w;
  height: @h;
}
div {
  // 想要一个向左的三角型
  .template(L);
}

• 当混合里面的第一个参数是 @_ 时并且也拥有其他形参时，调用同名混合也会把拥有这个参数的混合调用上

  • arguments 变量：和 js 中的 arguments 是一样的，是包含实参的伪数组

.border() {
  border: @arguments;
}
div {
  .border(1px,solid,black);
}
// 可以把合并语法传入进去

• 在 less 中，计算的双方只需要一方带单位就可以了
• 例如：100 + 100px == 200px
• 为了和 css 保持兼容，less 不会把 calc() 属性计算出来，会留到 css 中计算
  在 less 中所有的数值都可以直接进行运算

.box1 {
  // 在less中所有的数值都可以直接进行运算
  // + - * /
  width: 100px + 100px;
  height: 100px/2;
  background-color: #bfa;

  .box1 {
    /* calc()计算函数 */
    width: calc(200px * 2);
    height: var(--length);
    background-color: var(--color);
  }
}

• 继承同样是为了压缩代码，混合有时候两个类似的功能，他们的 css 代码相差不多，但是里面有很多的重复，这时我们可以使用继承来写这部分代码
• 在继承中不支持参数
• 语法格式：div:extend(.jicheng) (实质就是在两个选择器中加了一个逗号)

//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1) {
  color: red;
}

.p3 {
  //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
  //mixin 混合
  .p1();
}

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4() {
  width: 100px;
  height: 100px;
}

.p5 {
  .p4;
}

或者我们这样来看更直观

// less 文件
.jicheng {
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
}
.header:extend(.jicheng) {
  /* header 里的代码 */
}

• less 编译后

/* css 文件 */
.jicheng,
.header {
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
}
.header {
  /* header 里的代码 */
}

• 想要继承类的所有状态需要在 extend 后面加上 all div:extend(.jicheng all)

.jicheng {
  // 继承的东西...
}
.jicheng:hover {
  // :hover 继承的东西...
}
.header:extend(.jicheng all) {
  // header 自己的样式
}

• 这样就可以继承本身的和 :hover 的了

.jicheng,
.header {
}
.jicheng:hover,
.header:hover {
}