less基础学习记录总结

变量

less中可以定义变量，用于后文使用。

//使用@符号开始
@redColor: red;
//这样使用
.header {
  color: @redColor
}
//会被编译成
.header {
  color: red;
}
//还可以这样使用
@str: redColor;  //定义一个字符串
@redColor: red;
.header {
  color: @@str
}
//编译成
.header {
  color: red;    //得到同样的效果
}

运算

@color1: #000;
@other: @color1 + #111;
div {
  color: @other;
}

混合

混合顾名思义，就是将多种样式进行组合在一起。比如：

.bg-red {
  background-color: red;
}
.color-white {
  color: white;
}
div {
  width: 100%;
  height: 200px;
  .bg-red;
  .color-white;
}
//最终回被编译成
.bg-red {
  background-color: red;
}
.color-white {
  color: white;
}
div {
  width: 100%;
  height: 200px;
  background-color: red;
  color: white;
}

当然也可以使用变量，也可以嵌套。上边这样写，编译后会多处两个样式.bg-red和.color-white暴露在了作用域中。如果觉得不太好，那么带参数混合可以很好解决这样的问题。

带参数混合

.bg-red() {
  background-color: red;
}
.color(@c) {
  color: @c;
}
.border(@px: 1px, @type: solid, @c: red) {  //可以使用默认参数
  border: @px @type @c;
}
.border2(@px: 1px, @type: solid, @c: red) {
  border: @arguments;    //可以使用arguments代替所有参数
}
div {
  .bg-red;
  .color(white);
  .border();
  .border2; //可以添加括号，可以不添加
}
//编译后，不会出现.bg-red，.border等
div {
  background-color: red;
  color: #ffffff;
  border: 1px solid #ff0000;
  border: 1px solid #ff0000;
}

使用参数的传递的时候，匹配几个就会编译几个，而且还可以通过名称传递，而不用管其顺序。

.mixins(@color: red; @width: 200px; @height: 300px) {
  width: @width;
  height: @height;
  color: @color;
}
div {
  .mixins(@height: 400px)
}
//编译成
div {
  width: 200px;
  height: 400px;
  color: red;
}

条件规则

@media: mobile;
@color: white;

.mixin (@c) when (@media = mobile) { color: @c; }
.mixin (@c) when (@media = desktop) { color: @c;border:1px; }
.class1 {
  .mixin(@color);
}
//编译成
.class1 {
  color: white;
}

嵌套规则

.header {
  height: 300px;
  .title {
    width: 200px;
  }
  &:hover {
    background-color: red;
  }
}
//编译成
.header {
  height: 300px;
}
.header .title {
  width: 200px;
}
.header:hover {
  background-color: red;
}

Color函数

//可以使用许多种函数操作color，如：
lighten(@color, 10%);     // 返回一个比@color还要淡10%的color
darken(@color, 10%);      // 返回一个比@color还要深10%的color

命名空间

将嵌套灵活运用，就变成了命名空间的用法。

#home {
  .title {
    height: 80px;
    line-height: 80px;
  }
  .content {
    color: gray;
  }
  .footer {
    height: 100px;
    background-color: black;
  }
}
.title {
    #home > .title;
}
//编译成
#home .title {
  height: 80px;
  line-height: 80px;
}
#home .content {
  color: gray;
}
#home .footer {
  height: 100px;
  background-color: black;
}
.title {
  height: 80px;
  line-height: 80px;
}

像上面这样，会把#home .title等暴露出来，如果不想暴露，则可以在#home后边加上括号，文章上边提到过。这样就可以不用暴露在编译后的内容代码中

#home() {
  .title {
    height: 80px;
    line-height: 80px;
  }
  .content {
    color: gray;
  }
  .footer {
    height: 100px;
    background-color: black;
  }
}
.title {
    #home > .title;
}
//编译成
.title {
  height: 80px;
  line-height: 80px;
}

作用域

从当前模块作用域的最内层开始查找变量

@var: red;

#page {
  @var: white;
  #header {
    color: @var;
  }
}
#footer {
  color: @var;
}
//编译成
#page #header { color: white; }
#footer { color: red; }

Importing

@import 'xxx/xxx/public.less'      //导入public.less
@import 'xxx/xxx/public.css'      //导入public.css
@import 'xxx/xxx/public'         //导入public.less

这是学习记录，如想深入研究，建议拜访Less教程网站或者lesscss.cn