免費(fèi)AI編程助手
Sass 導(dǎo)入指令
描述
導(dǎo)入指令，導(dǎo)入SASS或SCSS文件。 它直接需要導(dǎo)入文件名。 在SASS中導(dǎo)入的所有文件將在單個(gè)CSS文件中組合。當(dāng)我們使用 @import 規(guī)則時(shí)，很少有事情編譯到CSS:
文件擴(kuò)展名<.css>
文件名以 http:// 開頭
文件名為 url()
@import 包含任何媒體查詢。
例如，使用以下代碼創(chuàng)建一個(gè)SASS文件:
@import "style.css"; @import "http://tutorialspoint.com/bar"; @import url(style); @import "style" screen;
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新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 規(guī)則導(dǎo)入文件的方法:
部分
部分是SASS或SCSS文件，它們使用下劃線在名稱（_partials.scss）開頭寫入。可以在SASS文件中導(dǎo)入部分文件名，而不使用下劃線。 SASS不編譯css文件，但使用下劃線，它只使SASS理解它是部分的，不應(yīng)該生成CSS文件。
嵌套@import
@import 指令可以包含在 @media 規(guī)則和CSS規(guī)則中。基本級(jí)文件導(dǎo)入其他導(dǎo)入文件的內(nèi)容。導(dǎo)入規(guī)則嵌套在與第一個(gè) @import 相同的位置。
例如，使用以下代碼創(chuàng)建一個(gè)SASS文件:
.container
{
background: #ffff;
}
將以上文件導(dǎo)入以下SASS文件，如下所示。
h4 {
@import "example";
}
上面的代碼將編譯成CSS文件，如下所示:
h4 .container {
background: #ffff;
}
句法
以下是用于在SCSS文件中導(dǎo)入文件的語(yǔ)法:
@import 'stylesheet'
例子
以下示例演示如何在SCSS文件中使用 @import :
import.html
<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>
接下來(lái)，創(chuàng)建文件 _partial.scss 。
_partial.scss
ul{
margin: 0;
padding: 1;
}
li{
color: #680000;
}
接下來(lái)，創(chuàng)建文件 style.scss 。
style.scss
@import "partial";
.container
{
background: #ffff;
}
h1
{
color: #77C1EF;
}
h4
{
color: #B98D25;
}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來(lái)執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:
style.css
ul {
margin: 0;
padding: 1; }
li {
color: #680000; }
.container {
background: #ffff; }
h1 {
color: #77C1EF; }
h4 {
color: #B98D25; }
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將上面的html代碼保存在 import.html 文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
更多建議：