描述
导入指令,导入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.html
Import example of sassExample using Import
Import the files in SASS
- Red
- Green
接下来,创建文件_partial.scss。
_partial.scssul{
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.cssul {
margin: 0;
padding: 1; }
li {
color: #680000; }
.container {
background: #ffff; }
h1 {
color: #77C1EF; }
h4 {
color: #B98D25; }
输出
让我们执行以下步骤,看看上面的代码如何工作:将上面的html代码保存在import.html文件中。
在浏览器中打开此HTML文件,将显示如下输出。