简介：

在当今快节奏的网络开发行业中，找到简化前端工作流程的方法至关重要。 CSS预处理器是实现这一目标的一种方法。 CSS预处理器通过包括变量，混音和功能等功能来使CSS代码编写更容易。在本文中，我们将研究CSS预处理器如何帮助您简化前端工作流程。

CSS预处理器到底是什么？

A CSS预处理器是一种脚本语言，可扩展和增强CSS。 Sass，Light和Stylus是一些受欢迎的CSS预处理器。这些预处理器使您能够使用仅CSS的功能，例如变量，功能和Mixins。

为什么要使用CSS预处理器？

CSS预处理器可以通过多种方式帮助您改善前端工作流程：

变量 - 允许您定义一个值，然后在整个样式表中重复使用它。这使您可以更改一次值，并在整个样式表中进行更新。

混合蛋白 - Mixin是CSS代码的块，可以在整个样式表中重复使用。这对于定义在多个位置使用的复杂样式很有用。

函数 - 使您可以执行可以在CSS代码中使用的计算和返回值。这对于指定根据屏幕大小而更改的响应方式很有用。

使用sass：

很容易理解为什么SASS是最受欢迎的CSS预处理器之一。 Sass具有许多功能，可以帮助您简化前端工作流程。这是使用Sass编写更好CSS的方法。

可以使用节点软件包管理器（NPM）安装安装SASS- SASS。打开终端并输入以下命令：

npm install -g sass

制作一个SASS文件 - 安装SASS后，您可以使用.scss扩展名制作SASS文件。例如，您可以创建一个名为styles.scss的文件。

使用变量 - sass中的$符号允许您定义变量。例如，您可以为主颜色定义一个变量，如下所示：

$primary-color: #f00;

然后可以在整个样式表中使用此变量如下：

h1 {
  color: $primary-color;
}

使用Mixins- SASS中的@mixin关键字允许您定义Mixins。例如，您可以按以下方式定义盒子阴影混合物：

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

然后可以在整个样式表中使用此混合物，如下所示：

.box {
  @include box-shadow(2px, 2px, 10px, #000);
}

使用函数 - sass中的@function关键字允许您定义函数。例如，您可以编写以下功能来计算容器的宽度：

@function container-width($columns, $column-width, $gutter-width) {
  @return ($columns * $column-width) + (($columns - 1) * $gutter-width);
}

然后可以在您的CSS代码中使用此功能：

.container {
  width: container-width(12, 60px, 20px);
}

使用少：

Limes是另一个流行的CSS预处理器，具有类似于SASS的功能。这是如何帮助您编写更好的CSS代码的方法。

少安装 - 节点软件包管理器可用于安装较少（NPM）。为此，启动您的终端并输入以下命令：

npm install -g less

减少文件 - 在安装更少后，您可以使用。例如，您可以创建一个名为styles.less的文件。

使用变量 - symel中的 @符号允许您定义变量。例如，您可以为主颜色定义一个变量，如下所示：

@primary-color: #f00;

然后可以在整个样式表中使用此变量如下：

h1 {
  color: @primary-color;
}

使用Mixins- 在较少的情况下使用Mixin关键字，您可以定义Mixins。例如，您可以按以下方式定义盒子阴影混合物：

.mixin-box-shadow(@x, @y, @blur, @color) {
  box-shadow: @x @y @blur @color;
}

然后可以在整个样式表中使用此混合物，如下所示：

.box {
  .mixin-box-shadow(2px, 2px, 10px, #000);
}

使用函数 - 较少的功能关键字允许您定义函数。例如，您可以编写以下功能来计算容器的宽度：

.container-width(@columns, @column-width, @gutter-width) {
  @return (@columns * @column-width) + ((@columns - 1) * @gutter-width);
}

然后可以在您的CSS代码中使用此功能：

.container {
  width: .container-width(12, 60px, 20px);
}

使用手写笔：

手写笔是具有不同语法的CSS预处理器。这是手写笔如何帮助您编写更好的CSS代码。

可以使用Node Package Manager（NPM）安装安装手写笔 - 手写笔。为此，启动您的终端并输入以下命令：

npm install -g stylus

制作手写笔文件 - 安装手写笔后，您可以使用.styl扩展名制作手写笔文件。创建一个名为styles.styl的文件。

使用变量 - 手写笔中的$符号允许您定义变量。例如，您可以为主颜色定义一个变量，如下所示：

$primary-color = #f00

然后可以在整个样式表中使用此变量如下：

h1
  color: $primary-color

使用Mixins- 手写笔中的Mixin关键字使您可以定义混合蛋白。例如，您可以定义一个盒子阴影混合蛋白，如下所示：使用Mixins-手写笔中的Mixin关键字允许您定义Mixins。例如，您可以按以下方式定义盒子阴影混合物：

box-shadow($x, $y, $blur, $color)
  box-shadow: $x $y $blur $color

然后可以在整个样式表中使用此混合物，如下所示：

.box
  box-shadow(2px, 2px, 10px, #000)

使用函数 - 手写笔中的功能关键字允许您定义函数。例如，您可以编写以下功能来计算容器的宽度：

container-width($columns, $column-width, $gutter-width)
  return ($columns * $column-width) + (($columns - 1) * $gutter-width)

然后可以在您的CSS代码中使用此功能：

.container
  width: container-width(12, 60px, 20px)

最后，CSS预处理器可以帮助您简化前端工作流程。它们通过包括变量，混音和功能来帮助您编写更好的CSS代码。使用诸如SASS，更少或手写笔之类的预处理器可以改善代码的模块化，可重复性和可维护性。

除了更好的CSS代码的优点外，使用预处理器还可以帮助您节省开发工作流程的时间和精力。预处理器可以将代码编译到可以自动使用的标准CSS代码中。这消除了为每个单独元素编写CSS代码的需求，这可能是耗时且容易出错的。

通过允许您在CSS文件中编写类似JavaScript的代码，带有CSS预处理器的ES6可以进一步简化您的前端工作流程。 ES6包括箭头功能，模板文字和破坏性的功能，可以帮助您编写更多简洁且可读的CSS代码。