SASS @import指令用法

CSS提供了@import选项, 使你能够将CSS分成更小, 更易于维护的部分。唯一的限制是, 每次在CSS中使用@import时, 它都会创建另一个HTTP请求。
Sass建立在当前CSS @import之上。不需要HTTP请求。取而代之的是, 它只提取要导入的文件, 然后将其与要导入的文件合并, 以便可以将单个CSS文件提供给Web浏览器。
假设我们有两个Sass文件_reset.scss和base.scss, 并且我们想将_reset.scss导入base.scss。
请参阅以下示例：

// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }

// base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

导入文件时, 不需要包括文件扩展名” .scss” 。它将生成以下CSS文件：
处理后的CSS：

html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

SASS导入示例让我们以一个示例来看一下Sass导入的用法。我们有一个名为” simple.html” 的HTML文件, 其中包含以下代码：
档案：simple.html

< !DOCTYPE html> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> < title> Import example of sass< /title> < link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/> < /head> < body> < h3> Available courses on srcmini:< /h3> < ul> < li> SQL< /li> < li> Oracle< /li> < li> Java < ul> < li> Core Java< /li> < li> Advance Java< /li> < /ul> < /li> < li> HTML/CSS< /li> < li> Etc.< /li> < /ul> < /body> < /html>

创建一个名为” simple.scss” 的SCSS文件, 其代码如下：
文件：simple.scss

html, body, ul, li { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: green; }

将两个文件都放在根文件夹中。
现在, 打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码：sass – watch simple.scss：simple.css
它将在同一目录中自动创建一个名为” simple.css” 的普通CSS文件。
例如：