Sass:Import

描述

导入指令,导入SASS或SCSS文件。它直接将文件名导入。在SASS中导入的所有文件都将合并到一个CSS文件中。当我们使用@import规则时,编译成CSS的东西很少。

  • 文件扩展名.css
  • 文件名以http://开头
  • 文件名是url()
  • @import包含所有媒体查询。

例如,使用以下代码创建一个SASS文件:

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\style.scss:style.css

上面的代码将被编译为CSS文件,如下所示:

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

以下是使用@import规则导入文件的方法-

部分

部分是SASS或SCSS文件,它们在名称(_partials.scss)的开头使用下划线编写。可以在不使用下划线的情况下将部分文件名导入SASS文件。SASS不会编译CSS文件。通过使用下划线,SASS可以理解它是局部的,不应生成CSS文件。

嵌套@import

@import指令可以被包含在里面@media规则和CSS规则。基本级别文件将导入另一个导入文件的内容。导入规则与第一个@import嵌套在同一位置。

例如,使用以下代码创建一个SASS文件:

.container {
   background: #ffff;
}

将上述文件导入到以下SASS文件,如下所示:

h4 {
   @import "example";
}

上面的代码将被编译为CSS文件,如下所示:

h4 .container {
   background: #ffff;
}

句法

下面给出的是用于在SCSS文件中导入文件的语法:

@import 'stylesheet'

以下示例演示了SCSS文件中@import的使用:

import.htm

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using Import</h1>
      <h4>Import the files in SASS</h4>
      <ul>
         <li>Red</li>
         <li>Green</li>
      </ul>
   </body>
</html>

接下来,创建文件_partial.scss

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

接下来,创建文件style.scss

style.scss

@import "partial";
.container {
   background: #ffff;
}

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来,执行以上命令;它将使用以下代码自动创建style.css文件:

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1710.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2021年1月28日 下午8:56
下一篇 2021年1月28日 下午9:02

相关推荐

发表评论

您的电子邮箱地址不会被公开。