css与ess差别在哪

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在网页开发的过程中,CSS和LESS都是十分重要的部分。他们两者之间有什么不同呢?让我们来看一下。CSS: h1 { font-size: 32px; color: red; } LESS: @mai

在网页开发的过程中,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简单很多,它通过使用变量和混合来更好地组织代码,让代码变得更加清晰易读,从而更加有效地管理网页开发。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css与ess差别在哪

粉丝

0

关注

0

收藏

0

已有0次打赏