Less is Less

變量

@color:red;
@font-size:14px;

h1{
    color:@color;
    font-size:@font-size;
}

@happy:red;
@life:'happy';

h1{
    color:@@life;
}

解析爲：

h1{
    color:red;
}

插值

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

解析爲：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

高級應用：

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

做用域

1. 變量使用以前不須要定義

2. 變量從當前做用域一直往上找，直到到根

3. 變量在同一個做用域裏聲明屢次，使用最後一個（相似css覆蓋）

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
    .inner{
        val:@var;
    }
  }
  one: @var;
}

解析爲：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}
.class .brass .inner {
  val: 3;
}

混入(類)

一些屬性的集合

無參

.mod{
    border-radius:5px;
}

.header{
    .mod;//.mod()
}

有參

單參

.mod(@radius){
    border-radius:@radius;
}

多參（推薦分號）

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

逗號和分號混合使用時，以分號做爲分隔符，逗號的參數做爲一組

.name(1, 2, 3; something, else)//2個參數

.name(1, 2, 3)//三個參數

.name(1, 2, 3;)//一個參數

有參帶默認值

.mod(@radius:5px){
    border-radius:@radius;
}

帶選擇器

.mod{
    &:hover{
        color:#fff;
    }
    .active{
        color:red;
    }
}

若一個類不想被解析到css文件裏:

.mod(){
    border-radius:5px;
}

類調用時，圓括號在無參，有參帶默認值時可選

調用時給類添加 !important，類中全部的屬性都會加上 !important

多個參數時，可使用逗號，分號隔開，建議用分號

arguments

.transition (@moveStyle :all;@delayTime : 4s;@moveType : ease-in; @moveTime : 2s){
    -webkit-transition: @arguments;    
    -moz-transition: @arguments;    
    -o-transition: @arguments;    
    -ms-transition: @arguments;    
    transition: @arguments;    
}

繼承(1.4.0)

.demo{
  color:red;
  font-size:19px;
}
div{
  &:extend(.demo);
  background-color: #red;
}

解析爲：

.demo,
div {
  color: red;
  font-size: 19px;
}
div {
  background-color: #red;
}

避免編譯

.class {
  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* 實際上會輸出下面的代碼: */
.class {
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

div{
    color:red~"\9\0"
}

div{
    color:red\9\0
}

javascript的表達式

@string: `'iwjw'.toUpperCase()`; //IWJW