css是一种让html与样式分离解析而出现的代码，它的出现大大提高了程序员的工作效率，和后期进行维护的效率。但是发展至今，由于起死板单调的写法，越来越不能满足程序员们灵活的思维，很多时候是种恨铁不成钢的心情来写css，于是，有一些聪明的程序员就发明了less。
less是为了简化css开发，灵活css开发而出现的，其功能非常强大，灵活性也很高，上手也很快，所以越来越受到前端开发的青睐，其中的基本语法我就不讲了，相信度娘上有无数的教程可以参阅，我就来讲点利用less灵活的特点做的一些东西。
1 less 解决 css3 的兼容前缀
<span style="color: #008080;">1</span> <span style="color: #800000;">.box-shadow(@shadow)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">-webkit-box-shadow</span>:<span style="color: #0000ff;">@shadow</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">-moz-box-shadow</span>:<span style="color: #0000ff;">@shadow</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">-o-box-shadow</span>:<span style="color: #0000ff;">@shadow</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">box-shadow</span>:<span style="color: #0000ff;">@shadow;
</span><span style="color: #008080;">6</span> }<br />#box{.box-shadow(2px 2px 3px #ccc);}//调用以此类推，老板再也不用担心我的css3跨浏览器兼容了；
立即学习“前端免费学习笔记（深入）”；
2 以代码块的方式封装less功能
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.list(@show:4, @width:100%, @line:10px)</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> @width</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> ul{
</span><span style="color: #008080;"> 4</span> <span style="color: #ff0000;"> .cf; margin-right</span>:<span style="color: #0000ff;"> -@line</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> red
</span><span style="color: #008080;"> 5</span> }
<span style="color: #008080;"> 6</span> <span style="color: #800000;"> li</span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> (@width - (@show - 1) * @line) / @show</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;"> @line</span>;<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;"> @line</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;"> img{ max-width</span>:<span style="color: #0000ff;"> 100%</span>; }
<span style="color: #008080;"> 9</span> <span style="color: #800000;"> }
</span><span style="color: #008080;">10</span> <span style="color: #800000;">}<br />#xx_list{.list(4, 1030px, 10px);}//调用，参数为：一行显示4个，总宽度，行间距</span>直接就能出item列表了，（.cf为清除浮动less，具体代码如下：）
<span style="color: #008080;">1</span> <span style="color: #800000;">.cf()</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> min-height</span>:<span style="color: #0000ff;"> 1px</span>;<span style="color: #ff0000;">zoom</span>:<span style="color: #0000ff;">1</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">after{content:""</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">visibility</span>:<span style="color: #0000ff;">hidden</span>}
<span style="color: #008080;">4</span> <span style="color: #800000;">}</span>
立即学习“前端免费学习笔记（深入）”；
3 less写自定义颜色渐变按钮以及按钮伪类
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.q-grad(@bgcolor:red, @origin: left, @alpha: 0.2) </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> @bgcolor</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha))</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha))</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha))</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha))</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha))</span>;
<span style="color: #008080;"> 8</span> }
<span style="color: #008080;"> 9</span> <span style="color: #800000;">.btn(@color, @bor-ra:2px, @fcolor: @color / 2)</span>{
<span style="color: #008080;">10</span> <span style="color: #ff0000;"> .q-grad(@color, top, 0.1); color</span>:<span style="color: #0000ff;"> @fcolor</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">1px solid @color / 1.2</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;"> .border-radius(@bor-ra);.transition(all 0.2s ease);
</span><span style="color: #008080;">11</span> <span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">hover{
</span><span style="color: #008080;">12</span> <span style="color: #0000ff;"> background-color: @color / 1.1</span>;
<span style="color: #008080;">13</span> }
<span style="color: #008080;">14</span> <span style="color: #800000;"> &:active</span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;">16</span> }
<span style="color: #008080;">17</span> <span style="color: #800000;">}<br />.btns{.btn(@tcolor, 3px); padding: 15px 50px;}//调用<br /></span>一次性又搞定了渐变，搞定了按钮的伪类，cool！
4 全局参数设置网站主题
<span style="color: #008080;">1</span> <span style="color: #800000;">@url:"../images/"; </span><span style="color: #008080;">2</span> <span style="color: #800000;">@bgcolor: #fff; </span><span style="color: #008080;">3</span> <span style="color: #800000;">@fcolor:#666; </span><span style="color: #008080;">4</span> <span style="color: #800000;">@hcolor:#ccc; </span><span style="color: #008080;">5</span> <span style="color: #800000;">...<br /></span>
调用的时候写对应参数，如果可能，用好less的颜色计算功能，就能调试好整个网站的配色，让你的网站一点也不单调！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
585
