📌  相关文章
📜  SASS导入

📅  最后修改于: 2020-12-25 03:54:06             🧑  作者: Mango

SASS导入

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

 
  
  
    Import example of sass  
     
  


Available courses on JavaTpoint:


    
  
  • SQL
    • 
  
  • Oracle
    • 
  
  • Java
    
      
      
    • Core Java
      • 
      
    • Advance Java
      • 
    
    
  
    • 
  
  • HTML/CSS
    • 
  
  • Etc.
    •

创建一个名为“ 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值。

输出：