? ? ? ? 1.less

? ? ? ? ?less是一種動態樣式語言，屬于CSS預處理器的范疇，它擴展了CSS語言，增加了變量，Mixin，函數等特性，使CSS更易維護和擴展。Less既可以在客戶端上運行，也可以借助Node.js在服務端運行。

????????2.Less中的注釋

? ? ? ? ? ? ? ? (1).以//開頭的注釋，不會被編譯到css文件中

? ? ? ? ? ? ? ? (2).以/**/包裹的注釋會被編譯到css文件中

? ? ? ? 3.Less中的變量

? ? ? ? ? ? ? ? (1).使用@來聲明一個變量：@pink：pink，@selector:#box;

? ? ? ? ? ? ? ? (2).作為普通屬性值來使用：直接使用@pink

? ? ? ? ? ? ? ? (3).作為選擇器、屬性名和url：使用@{selector}的形式

? ? ? ????????@color:deeppink;

? ? ? ????????@idname:#box;

? ? ? ????????@optionName:width;

? ? ? ????????.......................

? ? ? ????????@{idname}{

? ? ? ? ? ????????position: relative;

? ? ? ? ? ????????@{optionName}: 300px;

? ? ? ? ? ????????..........................

? ? ? ? ? ????????.inner{

? ? ? ? ? ? ? ????????..........................

? ? ? ? ? ? ? ????????background-color: @color;

? ? ? ? ? ? ? ????????...........................

? ? ? ? ? ????????}

? ? ? ????????}

? ? ? ? ? ? ? ? (4).變量的延遲加載

? ? ? ? @color:deeppink;

? ? ? ? @idname:#box;

? ? ? ? @optionName:width;

? ? ? ? @var:1;

? ? ? ?

? ? ? ? @{idname}{

? ? ? ? ? ? ...........................

? ? ? ? ? ? .inner{

? ? ? ? ? ? ? ? ...........................

? ? ? ? ? ? ? ? background-color: @color;

? ? ? ? ? ? ? ? @var:0.5;

? ? ? ? ? ? ? ? opacity: @var; // opacity: 0.3;

? ? ? ? ? ? ? ? @var:0.3;

? ? ? ? ? ? }

? ? ? ? ? ? opacity: @var; //?opacity: 1;

? ? ? ? }

? ? ? ? ?4.less的嵌套規則

? ? ? ? ? ? ? ? (1).基本嵌套規則

????????????????????????LESS 嵌套遵循 “父級選擇器包含子級選擇器” 的邏輯，對應 HTML 中的父子元素關系。

? ? ? ? ? ? ? ? (2).&的使用

????????????????????????用?&?避免生成后代選擇器。

@color:deeppink;

@idname:#box;

@optionName:width;

@var:1;

@{idname}{

? ? position: relative;

? ? @{optionName}: 300px;

? ? height: 400px;

? ? border: 1px solid #000;

? ? margin: auto;

? ? .inner{

? ? ? ?..........................

? ? ? ? background-color: @color;

? ? ? ? ..........................

? ? ? ? &:hover{? ? ? ? // 生成#box .inner:hover,不使用&則生成#box .inner :hover

? ? ? ? ? ? background-color: pink;

? ? ? ? }

? ? }

? ? ? ? ?5.避免編譯

#box{

? ? width: ~"calc(100px + 100px)"; //提示less這里不用編譯，讓原生css計算

? ? // height: 100px + 100px; //less編譯過后為200px

? ? height: 100px + 100em; //less編譯過后為200px,less運行出的單位是less遇到的第一個單位，是純數值運算，不考慮單位轉換

? ? background: red;

}

@color:deeppink;
@idname:#box;
@optionName:width;
@var:1;
*{margin: 0;padding: 0;
}
@{idname}{position: relative;@{optionName}: 300px;height: 400px;border: 1px solid #000;margin: auto;background-color: skyblue;.inner{width: 100px;height: 100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: @color;margin: auto;@var:0.5;opacity: @var;@var:0.3;&:hover{background-color: pink;}}opacity: @var;
}