srcminiCSS提供了@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="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文件。
例如：
创建的CSS文件” simple.css”包含以下代码：
html, body, ul, li {
margin: 0;
padding: 0; }
body {
font: 100% Helvetica, sans-serif;
background-color: green; }现在, 执行上面的HTML文件, 它将读取CSS值。
输出
评论前必须登录！
注册