描述

導入指令，導入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 sass

Example 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文件，將顯示如下輸出。

總結

以上是生活随笔為你收集整理的scss怎么引入到html,Sass 导入指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。