LESS Guide

This artilce is not write by myself,most of them is copy from the offcial document.If you want to learn more .

plz click : http://lesscss.org/features/#features-overview-feature.

I want to recommand a dictionary for you guys.It is English-English dictionary ,and this dictionary will help you understand the 

word more clear and precisely 。

plz click: https://www.ldoceonline.com/dictionary/

 

overview

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. 

 

Variables

.link{
    color: #eeeeee;
}
.widget{
    color: #eeeeee;
    background: #f3f3f3;
}

//  converts your Less styles to CSS styles.
//outputs

@link-color:#eeeeee;
@link-color-hover: darken(@link-color: 10%);
.link{
    color: @link-color;
}

variable make your code easier to maintain by giving you a way to control those values from a single location.

@link-color:#eeeeee;
@link-color-hover: darken(@link-color: 10%);
.link{
    color: @link-color;
}

a:hover{
    color: @link-color-hover;
}

Variable Interpolation

Selectors  v1.4.0

// Variables
@my-selector: banner;

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

Compiles to :

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

 

URLS

// Varaiable
@images : "../img";

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

Import Statements v1.4.0

//Variable
@themes: "../../src/themes"

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

Properties

 

 

附：LESS 英文文档生词

backwards-compatible 向下兼容

learning it is a breeze 轻而易举的事

 Built-in （forming a part of something that cannot be separated from it ->inbuilt） 嵌入

 third-party  第三方

self-explanatory 自解释

Variable Variables 可变变量

referencing variables 引用变量

environment variable 环境变量

nested rule 嵌套规则