Less教程

<h4 id="t0less">Less 是一门一种<span class="text-danger">动态</span>样式 语言，它扩充了CSS语言，增加了诸如<span class="text-danger">变量</span>、<span class="text-danger">混合（mixin）</span>、<span class="text-danger">函数</span>等功能，让 CSS 更易维护、方便制作主题、扩充。</h4>
<h2 id="t1客户端使用">客户端使用</h2>
<a href="https://github.com/less/less.js/archive/master.zip">下载地址</a>
<h3 id="t2外联样式">外联样式</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内联样式如下：">内联样式如下：</h3>
<pre><code class="lang-css"><style type="text/less">
// less 代码
</style>
</code></pre>
接下来 下载 less.js 并通过 标签将其引入，放置于页面的 元素内：
<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中的变量允许你在样式中的某个地方对常用值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果
<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中去调用这些属性
<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带参数混合">带参数混合</h2>
在LESS中，你还可以像函数一样定义一个带参数的属性集合
<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中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量
<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>
有些情况下，我们想根据传入的参数来改变混合的默认呈现
<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>
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用
<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嵌套规则">嵌套规则</h2>
LESS 可以让我们以嵌套的方式编写层叠样式
<pre><code class="lang-css">#dvi1 {
color: red;

p {
font-size: 12px;
}

.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
}
</code></pre>
<blockquote>注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus,&表示上一级元素</blockquote>