# less - 变量 ``` <pre class="calibre14">``` @fontsize<span class="token2">:</span><span class="token3">12</span>px<span class="token2">;</span> @mySelector<span class="token2">:</span> banner<span class="token2">;</span> <span class="token2">.</span>@<span class="token2">{</span>mySelector<span class="token2">}</span> <span class="token2">{</span> font<span class="token">-</span>weight<span class="token2">:</span> bold<span class="token2">;</span> line<span class="token">-</span>height<span class="token2">:</span> <span class="token3">40</span>px<span class="token2">;</span> margin<span class="token2">:</span> <span class="token3">0</span> auto<span class="token2">;</span> <span class="token2">}</span> ``` ``` - 混入 ``` <pre class="calibre14">``` <span class="token2">.</span><span class="token1">mixin</span><span class="token2">(</span><span class="token2">)</span> <span class="token2">{</span> width<span class="token2">:</span> <span class="token3">100</span><span class="token">%</span><span class="token2">;</span> height<span class="token2">:</span> <span class="token3">200</span>px<span class="token2">;</span> <span class="token2">}</span> <span class="token2">.</span>c<span class="token2">{</span> <span class="token2">.</span><span class="token1">mixin</span><span class="token2">(</span><span class="token2">)</span><span class="token2">;</span> <span class="token2">}</span> ``` ``` - 引用父类 ``` <pre class="calibre14">``` a <span class="token2">{</span> color<span class="token2">:</span> blue<span class="token2">;</span> <span class="token">&</span><span class="token2">:</span>hover <span class="token2">{</span> color<span class="token2">:</span> green<span class="token2">;</span> <span class="token2">}</span> <span class="token2">}</span> ``` ``` ``` <pre class="calibre14">``` <span class="token2">.</span>clearfix <span class="token2">{</span> display<span class="token2">:</span> block<span class="token2">;</span> zoom<span class="token2">:</span> <span class="token3">1</span><span class="token2">;</span> <span class="token">&</span><span class="token2">:</span>after <span class="token2">{</span> content<span class="token2">:</span> <span class="token4">" "</span><span class="token2">;</span> display<span class="token2">:</span> block<span class="token2">;</span> font<span class="token">-</span>size<span class="token2">:</span> <span class="token3">0</span><span class="token2">;</span> height<span class="token2">:</span> <span class="token3">0</span><span class="token2">;</span> clear<span class="token2">:</span> both<span class="token2">;</span> visibility<span class="token2">:</span> hidden<span class="token2">;</span> <span class="token2">}</span> <span class="token2">}</span> ``` ``` 输出 ``` <pre class="calibre16">``` <span class="token2">.</span>clearfix <span class="token2">{</span> display<span class="token2">:</span> block<span class="token2">;</span> zoom<span class="token2">:</span> <span class="token3">1</span><span class="token2">;</span> <span class="token2">}</span> <span class="token2">.</span>clearfix<span class="token2">:</span>after <span class="token2">{</span> content<span class="token2">:</span> <span class="token4">" "</span><span class="token2">;</span> display<span class="token2">:</span> block<span class="token2">;</span> font<span class="token">-</span>size<span class="token2">:</span> <span class="token3">0</span><span class="token2">;</span> height<span class="token2">:</span> <span class="token3">0</span><span class="token2">;</span> clear<span class="token2">:</span> both<span class="token2">;</span> visibility<span class="token2">:</span> hidden<span class="token2">;</span> <span class="token2">}</span> ``` ```