热搜：编程 Python Microsoft 编程语言 C++

LESS 让css也支持变量，运算符，include,嵌套规则等等

发布时间：2023-03-08 21:32:22 来源：互联网

.

在放大镜下，你可以看到每一片雪花都是一幅幅精美的图案：有的是晶莹的薄片，有的像白亮的银针，有的像一把张开的小扇，有的像夜空的星星……

使用
1. 下载js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.30
2. 使用less，css文件的后缀名需要改为.less。
3. 在html页面中加入下面代码

<link rel="stylesheet/less" rel="nofollow noopener noreferrer" href="style.less" />
<script src="less-1.0.22.min.js"></script>

变量
变量可以让我们声明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个规则样式一样，但没办法，我们只能copy过来，或者为元素指定多个class。但用了LESS后，我们不再需要这么痛苦了。

一般css写法：

复制代码

代码如下:

.red{
color:red;border:1px solid red;
}
.class2{
width:100px;font-size:12px;
/*下面的样式跟red的一样,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
}

嵌套规则:
　　一般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" rel="nofollow noopener noreferrer" href="style.less" />必须在js前面。

总结:
　　LESS JS版本的实现原理，是每次请求都需要通过JS去动态生成原始的css，如果css比较大的话，对于客户端的性能影响比较大，所以个人觉的less的js版本实用性不强。
　　不知道LESS 的ruby版本的实现原理是怎么样的，我认为如果真的觉得less方式可以提高css的开发效率，到是可以参考它的代码实现一套java或net的源代码，在程序启动的时候一次根据.less文件生成所有的css文件，而不是每次请求都用js动态生成。

PS:刚刚无意间搜索，竟然找到1个net版本的less，大家可以看看这个版本怎么实现的：http://www.dotlesscss.com/
[作者]：BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/

到此这篇关于LESS 让css也支持变量，运算符，include,嵌套规则等等就介绍到这了。创富靠坚持，坚持为梦想，用勤劳的双手和先进的思想来实现心中的梦想。更多相关LESS 让css也支持变量，运算符，include,嵌套规则等等内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： 运算符 css