CSS SCSS / SASS 到指定文件夹的CSS 以及 PHPstorm 7文件监视器

在本文中，我们将介绍如何使用PHPstorm 7文件监视器将CSS SCSS / SASS编译为CSS，并将其输出到特定文件夹中。

阅读更多：CSS 教程

什么是SCSS / SASS和CSS？

SCSS和SASS是CSS预处理器，它们提供了更强大和灵活的功能，使得CSS的编写更加简单和可维护。与传统的CSS相比，SCSS / SASS允许我们使用变量、嵌套规则、混入和继承等更高级的特性，使得样式表的编写更加高效和灵活。

CSS是层叠样式表的缩写，它是一种用来描述HTML或XML文档外观的样式表语言。CSS可以控制网页中各种元素的外观、布局和行为，比如字体样式、颜色、尺寸、位置等。

设置文件监视器

首先，我们需要在PHPstorm 7中设置文件监视器，以便在SCSS文件发生更改时自动将其编译为CSS文件。

打开PHPstorm 7，点击顶部菜单栏的”File”，然后选择”Settings”。
在设置窗口中，选择”Tools”，然后点击”File Watchers”。
在文件监视器列表中，点击”+”按钮以添加新的文件监视器。

配置文件监视器

添加新的文件监视器后，我们需要配置它以正确地使用SCSS / SASS编译器并将输出的CSS文件保存到特定文件夹中。

在”File Watcher”设置窗口中，选择”SCSS”或”SASS”。
在”Program”字段中，输入SCSS或SASS编译器的路径。通常情况下，您可以安装一个SCSS或SASS编译器，比如node-sass，然后在这里输入其路径。
在”Arguments”字段中，输入编译器的一些参数。例如，如果您使用的是node-sass编译器，参数可以是--output-style compressed，用于对生成的CSS进行压缩。
在”Output paths to refresh”字段中，输入您想要将已编译的CSS文件保存到的特定文件夹路径。例如，/path/to/output/css。
点击”OK”保存设置。

使用SCSS / SASS编写样式表

现在，您可以开始使用SCSS / SASS编写样式表了。创建一个新的SCSS或SASS文件，并在其中编写样式规则。以下是一个简单的示例：

$primary-color: #ff0000;

.header {
  background-color: $primary-color;
  color: white;
  padding: 10px;
}

.button {
  background-color: $primary-color;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

在这个示例中，我们定义了一个名为$primary-color的变量，并将其设置为红色。然后，我们使用该变量在.header和.button样式规则中设置背景色。通过使用变量，我们可以轻松地更改整个样式表的颜色方案。