Less 使用教程

注释

//单行注释

/*
多行注释
多行注释
多行注释
*/

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}

混合

混合（Mixin）将一组属性从一个规则集混入到另一个规则集
第一种：将.border的样式直接引入.container，直接引用即可。

.container{
  width: 100px;
  height: 100px;
  background: red;
  .border;
}
.border{
  border: 1px solid black;
}

编译后的CSS代码
.container {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid black;
}
.border {
  border: 1px solid black;
}

第二种：将.border(参数）引进.container

.container{
  width: 100px;
  height: 100px;
  background: red;
  .border(2px);
}
.border(@borderWidth){
  border: solid black @borderWidth;
}

编译后的CSS代码
.container {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid black;
}
.border {
  border :solid black 2px;
}

第三种：基于第二种，将参数给定默认参数
.border(默认参数)传入.container
不给参数就按照默认参数，给参数就按照给定参数。

.container{
  width: 100px;
  height: 100px;
  background: red;
  .border();
}
.border(@borderWidth: 10px;){
  border: solid black @borderWidth;
}

编译后的CSS代码
.container {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid black;
}
.border {
  border :solid black 10px;
}

嵌套

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

less书写

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

& 表示当前选择器的父级:

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

运算

一般运算是用在px和color,color相对少用

@fontSize：14px;
@color: #ccc;

.container{
  font-size: @fontSize + 10;
  color: @color + 10;
}


 //解析成CSS
.container {
  font-size: 24px;
  color: #d6d6d6;
}

作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

导入

@import "library"; // library.less
@import "typo.css";