1.變量
很簡單,就是事先聲明好屬性變量顶掉,選擇器直接引用即可
2.混合
引用另一個規(guī)則集里的某些屬性時,直接在訪問類的名稱
3.嵌套
示例解釋:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
輸出結(jié)果:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
媒體查詢:<code>@media</code>嵌套方式挑胸,示例解釋:
.screencolor{
@media screen {
color: green;
@media (min-width:768px) {
color: red;
}
}
@media tv {
color: black;
}
}
輸出結(jié)果:
@media screen {
.screencolor {
color: green;
}
}
@media screen and (min-width: 768px) {
.screencolor {
color: red;
}
}
@media tv {
.screencolor {
color: black;
}
}
選擇器<code>.screencolor</code>被移動到了<code>@media</code>內(nèi)部痒筒。
4.運(yùn)算
任何數(shù)值,顏色和變量都可以進(jìn)行運(yùn)算茬贵。
Less 能夠推斷顏色和單位之間的區(qū)別簿透。
如:
@var:1px +5;
結(jié)果輸出<code>@var:6px</code>。
5.函數(shù)
示例:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);//基礎(chǔ)顏色值得飽和度增加5%
background-color: spin(lighten(@base, 25%), 8);//背景顏色亮度增加25%后將色相值增加8%
}
6.命名空間和訪問器
不要將它與CSS <code>@namespace</code>或者namespace選擇器混為一談解藻?
這句話大概意思是老充?
封裝一部分變量和mixins(混合),以便以后復(fù)用或分發(fā):
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { ... }
.citation { ... }
}
現(xiàn)在想在<code>#header a</code>中混合<code>.button</code>類螟左,我們可以:
#header a{
color:#orange;
#button > .button;
}
7.作用域
首先局部尋找啡浊,如果沒找到,再從父作用域?qū)ふ衣肥ǎ来晤愅?/p>
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
變量和混合不必在使用前聲明虫啥,即<code>@var: white;</code>在<code>#header</code>前后一樣奄妨。
8.注釋
/*這是注釋*/
9.導(dǎo)入
@import "library"; //導(dǎo)入library.less
@import "type.css";
對于<code>.less</code>文件而言涂籽,其擴(kuò)展名是可選的。