CSS预处理器的快速指南-DEV365 开发者社区

您可能会相信您现在知道网络开发过程，然后在下一刻，您的同事随随便便谈论CSS及其处理器。什么是CSS？他们如何使开发人员的生活更容易获得？

现在是时候进入CSS预处理器的世界，这是任何编码器工具箱的重要组成部分。在此博客中，我们将简要介绍CSS本身及其解决的编码问题。接下来，我们将介绍他们的一些功能，优点和缺点。

什么是CSS？

CSS代表级联样式表。它提供了高水平的编写CSS，可扩展基本功能。此高级代码后来作为常规CSS代码编译。与JavaScript和HTML一起，CSS构建了网上网页的基础。使用CSS，您可以通过颜色，布局和文本样式来定义网页的介绍。

CSS还处理对不同类型的设备和屏幕尺寸的调整。将CSS与HTML分开使维护网站更容易。因此，您可以在所有页面上共享样式表，或将其调整为各种条件。 CSS预处理器是一种扩展CSS语言并将其编译到常规CSS语法中的语言。浏览器只能理解CSS，这可能需要更多的内容来编写干净的规则。使用CSS，设计师/开发人员只能在各种选择器中重新使用一系列法规，并在样式表中提供清晰的信息。为了克服这一限制，创建了预处理器的概念。

CSS解决了什么问题？

CSS的主要问题是从HTML删除网页格式。它用于描述网站的结构。将其视为房屋的支柱，例如房屋，无论是标题，列表，链接等。随着时间的流逝，将诸如字体或颜色属性之类的标签添加到HTML中。这成为网络开发人员的噩梦。

必须从头开始为每个页面编写样式和设计，而无需共享样式。它使开发过程更加昂贵。

CSS主要从HTML中提取样式。 CSS文件。您只需在外部样式表的帮助下，只需一个文件即可更改任何网站的外观。 CSS通过使样式更加重复使用来节省时间和精力。

什么是CSS预处理器？

如果CSS听起来很完美，为什么我们不定期使用它？什么会变坏？仍然有一些缺点。随着网络的发展，构成习惯平原，CSS可以变得广泛而单调。 CSS预处理器扩展了标准CSS的有用性。它们添加了额外的逻辑语法和工具，例如/其他语句和循环。它使CSS更有效，健壮和动态。

开发人员可以使用CSS预处理器编写更复杂的样式和布局。源代码可以有限且可读。 CSS预处理器添加语法，而不是在CSS内部。该高级代码累积为普通CSS代码。

受欢迎的CSS预处理器

有三个主要CSS预处理器： sass ，少和 stylus 。大多数CSS预处理器具有类似的功能。每个处理器都有其独特的完成任务的方式。

高级用法存在一些差异；让我们详细讨论它们。

Sass

SASS代表语法上很棒的样式表。它主要有两个选择语法的选择，即SASS和SCSS。目前，由于版本3.0，SCSS是官方语法。 SCSS更接近常规CSS，使迁移更加容易。两者之间的显着差异是使用括号和分号。 Sass具有所有版本的可行性。它有一个大组，已经存在了15多年以上，并且具有比其他CSS预处理程序更多的功能，其他的支持结构在SASS周围，类似于Compass和Bourbon。

。

较少的

LESS是较精简的床单的缩写。它的设计与预期的是常规CSS一样，语法是相同的。在节点JavaScript中的浏览器中运行更少。较少的情况下，汇编通过浏览器中的LINS.JS进行。快速，现代浏览器还可以。但是，我们必须意识到旧的浏览器。以及small.js在浏览器中缓存CSS，因此无需每次为用户再生。

手写笔

The Stylus建立在Node.js上。它与萨斯和少的不同之处，这对语法更加有用。手写笔让您可以随时省略半隆，结肠和牙套。另一个很酷的功能是手写笔具有属性查找功能。如果您将属性x相对于属性y的值设置，则可以轻松执行此操作。由于其灵活性，手写笔可以更简洁，但取决于您首选的语法。

CSS预处理器功能

让我们深入研究CSS预处理器添加到CSS的功能。

变量

就像在programming languages中一样，CSS预处理器允许您在样式中添加变量。它对于您打算经常重复使用的样式很有用。

例如：

$hoverColor: #33FF9B;
button {
  background-color: $hoverColor;
}

上面，我们定义了悬停颜色变量。而不是每次在应用程序中需要时查看并确定代码。您可以参考$hoverColor而不是变量。

如果/else语句

这些语句允许我们在适当的情况下应用一些CSS。例如，在检查时，页面的宽度比500像素更重要。如果是这样，我们将把保证金设置为100px或顶部的边距为10px。

@if width(body) > 500px {
  margin-top: 100px;
} else {
  margin-top: 10px;
}

循环

循环是有价值的，当您有一系列项目，即要增加的数组或对象。例如，假设我们有不同的SM图标的内容，以及我们应该应用的颜色/字体。我们希望按照设计前景来看一下，并应用相关的颜色，然后在每个按钮上链接到每个按钮。我们将浏览$social object并分配每种颜色，并链接到我们的控件。

@each $name, $color in $social {
  // selector based on href name
  [href*='#{$name}'] {
    background: $color;

 // apply the link for the relevant image file
 &::before {
      content: URL(https://www.careerfoundry.com/images/#{$name}.png);
    }
  }
}

流行的功能包括Mixins，颜色功能，扩展等。当然，这取决于您使用的预处理程序！

使用CSS预处理器的优点

它使代码更可维护。您可以在一个地方声明并修复品牌颜色。如果您想以后更改品牌颜色，只需在一个地方更新它们。
这些预处理器使重复使用样式变得容易，这意味着您不必重复编写相同的代码。
您可以对代码进行分组并在CSS中更具体。较少的重复较短，更可读。
这更有效。

使用CSS预处理器的缺点

由于我们在CSS中重复使用代码，因此发现问题可能需要更长的时间。
由于浏览器没有读取更高级的CSS版本，因此需要在显示样式之前将其编译为常规CSS。
源文件将更简洁，但是生成的CSS文件可能很大。这可能会导致请求完成。

就是这样！希望您现在完全了解CSS预处理器。 CSS预处理器是标准配置。在许多组织中，您会发现它们是web development process的一部分。最佳选择通常依赖于项目和开发商的喜好，以及创建合资的时间。是时候在下一个项目中应用任何预处理器并查看他们可以做什么了！