LESS 让css也适用自变量,运算符,include,嵌套循环

日期:2021-01-20 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

应用
1. 免费下载js: http://lesscss.googlecode.com/ 全新版本号仿佛是 1.0.30
2. 应用less,css文档的后缀名必须改成.less。
3. 在html网页页面中添加下面编码
<!-- style.less文档便是款式表文档,而且style.less务必放在less⑴.0.22.min.js文档前载入,基本原理后边详细介绍 -->
<link rel="stylesheet/less" href="style.less" />
<script src="less⑴.0.22.min.js"></script>

自变量
自变量可让大家申明1个变量定义值,并在之后多处地区开展反复应用。

1般css写法:

拷贝编码
编码以下:

.class1{
color:#ccc;
width:100px;
}
.class2{
color:#ccc;
width:120px;
}


LESS写法:

拷贝编码
编码以下:

@color1: #ccc;
.class1{
color:@color1;
width:100px;
}
.class2{
color:@color1;
width:120px;
}

inlucde
大伙儿1定碰见过再某个标准中必须用的一部分款式跟此外1个标准款式1样,但没法,大家只能copy过来,或为元素特定好几个class。但用了LESS后,大家已不必须这么痛楚了。

1般css写法:

拷贝编码
编码以下:

.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*下面的款式跟red的1样,copy过来的,改动就要改动2处*/
color:red;border:1px solid red;
}

LESS写法:

拷贝编码
编码以下:

.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*立即inlcude .red的标准*/
.red
}

嵌套循环标准:
  1般css的写法:

拷贝编码
编码以下:

#header{color:red;}
  #header .logo{backgroud-image:url(logo.gif);}
  #header li{display:block;}

LESS写法:

拷贝编码
编码以下:

#header{
color:red;
.logo{
backgroud-image:url(logo.gif);
}
li{
display:block;
}
}

运算符:
  LESS 写法:

拷贝编码
编码以下:

@fontSize 12px;
.class1{
font-size : @fontSize + 2;
}
.class2{
font-size : @fontSize * 2;
}

更多其它作用:
请见LESS官网:http://lesscss.org/


基本原理剖析:
  LESS js版本号的完成方法是应用ajax获得style.less文档,随后依据该文档的标准转化成最后访问器能了解的css插进到html编码中。因此就出現前面说过的<link rel="stylesheet/less" href="style.less" />务必在js前面。


总结:
  LESS JS版本号的完成基本原理,是每次恳求都必须根据JS去动态性转化成初始的css,假如css较为大的话,针对顾客端特性危害较为大,因此本人觉的less的js版本号好用性不强。
  不知道道LESS 的ruby版本号的完成基本原理是如何的,我觉得假如真的感觉less方法能够提升css的开发设计高效率,到是能够参照它的编码完成1套java或net的源码,在程序流程起动的情况下1次依据.less文档转化成全部的css文档,而并不是每次恳求都用js动态性转化成。


PS:不久不经意间检索,居然寻找1个net版本号的less,大伙儿能够看看这个版本号如何完成的:http://www.dotlesscss.com/
[作者]:BearRui(AK⑷7)
[blog]: http://www.cnblogs.com/BearsTaR/