less筆記

1. 變數

//less
@color: #4D926F;

//使用
#header {
  color: @color;
}

2. 混合

//less
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
}

//使用
#footer {
  .rounded-corners(10px);
}

3. 運算

//less
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

@arguments包含了所有傳遞進來的參數

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
}

4. 條件判斷

//less
.arrow(@direction,@color,@pixel:5px) when (@direction = up) {
    .arrowUp(@color);
    .arrowSet(@pixel);
}
.arrow(@direction,@color,@pixel:5px) when (@direction = down) {
    .arrowDown(@color);
    .arrowSet(@pixel);
}

//使用
div.d1{
    .arrow(right,red);
}