less的优缺点及总结

最新推荐文章于 2024-08-20 11:47:28 发布

Soochow_zhangyu

最新推荐文章于 2024-08-20 11:47:28 发布

阅读量7.3k

点赞数

分类专栏： bootstrap 文章标签： css less

本文链接：https://blog.csdn.net/Soochow_zhangyu/article/details/83789759

版权

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

Less是一种CSS预处理语言，提供变量、混型（mixin）和嵌套等功能，提高了CSS编写效率和可维护性。优点在于简化大型项目的样式修改，如通过变量统一管理样式，使用混型复用复杂样式，以及通过嵌套提升代码组织性。缺点包括增加学习成本，需要额外的编译工具，并且编译后的CSS文件大小略有增加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先来看看官方定义：

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。

less的优点：

可以设置变量。在比较大的工程里面，想要找到某个特定的样式并修改参数无疑是非常困难的，而有了变量设置，可以把所有的样式的值都用变量表示，这样修改某个样式就只需要找到对应的变量就行了。
比如bootstrp源码包里就有个variables.less文件，专门用来放变量，当然，比较小的工程没必要费那个劲。
可以写混型（mixin）。有点像是预定义的类，有些写法很复杂、字很多的样式，可以先把他写成类，然后在后面直接引用就行了。
比如：

.color-gradient(@start-color, @end-color){
	background: linear-gradient(@start-color, @end-color);
	background: -moz-linear-gradient(@start-color, @end-color);
	background: -o-linear-gradient(@start-color, @end-color);
	background: -webkit-linear-gradient(@start-color, @end-color);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = @start-color, endColorstr = @end-color);
	//GradientType = 0----vertical; GradientType = 1----horizontal.
}

以后每次遇到渐变色，引用.color-gradient(@start-color, @end-color)就可以了。

可以用嵌套的方式写css。其实这一点才是最关键最好用的，本来写css的选择器很是头疼，有些标签要反复写，效率低且易出错，现在用less写，只需要按照html的DOM树方式写一遍，然后在里面加样式就行了。
比如：

.nav{
	.container{
		ul{
			li{
				float: left;
				margin-right: 5px;
				a{
					font-size: 1.8em;
					padding: 10px 20px;
					display: block;
					color: #3f3f3f;
					&:hover, &.actived{
						color: #fff;
						.color-gradient(#b27625, #e4ac27);
						.round-border(1rem, 1rem, 0, 0)
					}
				}
			}
		}
	}
}

否则你将要在css文件中这样写：

.nav .container ul li {
  float: left;
  margin-right: 5px;
}
.nav .container ul li a {
  font-size: 1.8em;
  padding: 10px 20px;
  display: block;
  color: #3f3f3f;
}
.nav .container ul li a:hover,
.nav .container ul li a.actived {
  color: #fff;
  background: linear-gradient(#b27625, #e4ac27);
  background: -moz-linear-gradient(#b27625, #e4ac27);
  background: -o-linear-gradient(#b27625, #e4ac27);
  background: -webkit-linear-gradient(#b27625, #e4ac27);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#b27625, endColorstr=#e4ac27);
  border-radius: 1rem 1rem 0 0;
  -moz-border-radius: 1rem 1rem 0 0;
  -webkit-border-radius: 1rem 1rem 0 0;
}

层次不分明，逻辑混乱，字还多。
暂时只能体会到这些了。

缺点

额外的学习成本。虽然会css的人学less很快，但想要写出结构合理、逻辑分明的less还是要多练，另外想要用多个less文件编译成一个css文件（如bootstrap那样），还要另外学专门的编译工具以及配置文件写法（如grunt）。
注：考拉这款软件很棒，可以即时编译你的less文件，写完less保存一些就能得到css文件，但美中不足的是，他好像不支持配置编译，只能编译单文件
用less编译出的css文件比直接写的稍微大那么一点点，不过现在网速那么快，8k和8.5k的区别是看不出来的。