<h4 id="t0less">Less 是一門一種<span class="text-danger">動態(tài)</span>樣式 語言，它擴充了CSS語言，增加了諸如<span class="text-danger">變量</span>、<span class="text-danger">混合（mixin）</span>、<span class="text-danger">函數(shù)</span>等功能，讓 CSS 更易維護、方便制作主題、擴充。</h4>
<h2 id="t1客戶端使用">客戶端使用</h2>
<a >下載地址</a>
<h3 id="t2外聯(lián)樣式">外聯(lián)樣式</h3>
引入你的 .less 樣式文件的時候要設置 rel 屬性值為 “stylesheet/less”:
<pre><code class="lang-css"><link rel="stylesheet/less" type="text/css" href="styles.less">
</code></pre>
<h3 id="t3內(nèi)聯(lián)樣式如下：">內(nèi)聯(lián)樣式如下：</h3>
<pre><code class="lang-css"><style type="text/less">
// less 代碼
</style>
</code></pre>
接下來 下載 less.js 并通過 標簽將其引入，放置于頁面的 元素內(nèi)：
<pre><code class="lang-css"><script src="less.js" type="text/javascript"></script>
</code></pre>
<blockquote>注意：你的less樣式文件一定要在引入less.js前先引入。</blockquote>
<h2 id="t4變量">變量</h2>
Less中的變量允許你在樣式中的某個地方對常用值進行定義，然后應用到樣式中，這樣只要改變你定義的變量參數(shù)值就可以達到改變?nèi)值男Ч?br>
<pre><code class="lang-css"><span class="hljs-at_rule">@<span class="hljs-keyword">base:red;</span>
body</span>{<span class="hljs-tag">color</span>:<span class="hljs-at_rule">@<span class="hljs-keyword">base}</span>
</span></code></pre>
<h2 id="t5混合">混合</h2>
在LESS中我們可以定義一些通用的屬性集為一個class，然后在另一個class中去調(diào)用這些屬性
<pre><code class="lang-css">.bordered {
border-top: solid 1px red;
border-bottom: solid 2px green;
}
.div1 {
color: #111;
.bordered;
}
.div2 {
color: red;
.bordered;
}
</code></pre>
<h2 id="t6帶參數(shù)混合">帶參數(shù)混合</h2>
在LESS中，你還可以像函數(shù)一樣定義一個帶參數(shù)的屬性集合
<pre><code class="lang-css">.border-radius (@radius: 5px) {
border:1px solid red;
border-radius: @radius;
width:300px;
}
.div1 {
.border-radius(0px);
}
.div3 {
.border-radius;
}
.div2 {
.border-radius(20px);
}
</code></pre>
<h2 id="t7arguments">arguments</h2>
@arguments在Mixins中具是一個很特別的參數(shù)，當Mixins引用這個參數(shù)時，他將表示所有的變量
<pre><code class="lang-css"><span class="hljs-class">.pad</span>(<span class="hljs-at_rule">@<span class="hljs-keyword">top,@right,@bottom,@left)</span> </span>{
<span class="hljs-tag">padding</span>:<span class="hljs-at_rule">@<span class="hljs-keyword">arguments;</span>
}
div</span>{
<span class="hljs-tag">width</span><span class="hljs-pseudo">:400px</span>;
<span class="hljs-tag">border</span><span class="hljs-pseudo">:1px</span> <span class="hljs-tag">solid</span> <span class="hljs-tag">red</span>;
<span class="hljs-class">.pad</span>(10<span class="hljs-tag">px</span>,50<span class="hljs-tag">px</span>,100<span class="hljs-tag">px</span>,40<span class="hljs-tag">px</span>)
}
<span class="hljs-tag">p</span>
<span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> green</span></span>;
}</span>
</code></pre>
<h2 id="t8模式匹配">模式匹配</h2>
有些情況下，我們想根據(jù)傳入的參數(shù)來改變混合的默認呈現(xiàn)
<pre><code class="lang-css">.mixin (red, @color) {
color: red;
}
.mixin (green, @color) {
color: green;
}
.mixin (@_, @color) {
display: block;
}
@switch: red;
.div1 {
.mixin(@switch, #888);
}
</code></pre>
<h2 id="t9導引表達式">導引表達式</h2>
當我們想根據(jù)表達式進行匹配，而非根據(jù)值和參數(shù)匹配時，導引就顯得非常有用
<pre><code class="lang-css">.mixin (@a) when (@a =red) {
background-color: red;
}
.mixin (@a) when (@a =green) {
background-color: green;
}
.mixin (@a) {
color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }
</code></pre>
<h2 id="t10嵌套規(guī)則">嵌套規(guī)則</h2>
LESS 可以讓我們以嵌套的方式編寫層疊樣式
<pre><code class="lang-css">#dvi1 {
color: red;
p {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
}
</code></pre>
<blockquote>注意 & 符號的使用—如果你想寫串聯(lián)選擇器，而不是寫后代選擇器，就可以用到&了. 這點對偽類尤其有用如 :hover 和 :focus,&表示上一級元素</blockquote>
