SASS @import
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 @import示例
让我们以一个示例来看一下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="simple.css"/>
</head>
<body>
<h3>Available courses on lidihuo:</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 watch 该文件，并在每次SASS时更新CSS。文件已更改。
执行以下代码: sass--watch simple.scss: simple.css
它将创建一个名为" " simple.css"自动添加到同一目录中。
例如:
The创建的CSS文件" simple.css"包含以下代码:
html, body, ul, li {
margin: 0;
padding: 0; }
body {
font: 100% Helvetica, sans-serif;
background-color: green; }
现在，执行上述HTML文件，它将读取CSS值。
