个性化阅读
专注于IT技术分析

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="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文件。

例如:

SASS @import指令用法1

创建的CSS文件” simple.css”包含以下代码:

html, body, ul, li {
  margin: 0;
  padding: 0; }

body {
  font: 100% Helvetica, sans-serif;
  background-color: green; }

现在, 执行上面的HTML文件, 它将读取CSS值。

输出

SASS @import指令用法2
赞(0) 打赏
未经允许不得转载:srcmini » SASS @import指令用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏