[分享]css与ess差别在哪

在网页开发的过程中，CSS和LESS都是十分重要的部分。他们两者之间有什么不同呢？让我们来看一下。

CSS：
h1 {
  font-size: 32px;
  color: red;
}

LESS：
@main-color: red;

h1 {
  font-size: 32px;
  color: @main-color;
} 

其中最大的一个不同是LESS拥有变量。在LESS中，你可以通过@来定义变量，这是CSS所不能做到的。这包括了颜色，字体大小等。

LESS还可以使用混合。这是一种可以将多个CSS属性组织在一起的方式。

LESS：
.border-radius(@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.box {
  .border-radius(5px);
} 

这个操作打出的结果和下面的CSS是等价的。

CSS：
.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
} 

总的来说，LESS相较于CSS简单很多，它通过使用变量和混合来更好地组织代码，让代码变得更加清晰易读，从而更加有效地管理网页开发。