建站
咨詢
售后
建站咨詢
新聞中心
Sass(Syntactically Awesome StyleSheets)是css的一個(gè)擴(kuò)展開發(fā)工具，它允許你使用變量、條件語句等，使開發(fā)更簡(jiǎn)單可維護(hù)。這里是官方文檔，本篇文章重點(diǎn)為大家講解一下Sass @import與Partials。
專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)興寧免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
Sass @import
Sass 可以讓我們減少可以幫助我們減少 CSS 重復(fù)的代碼，節(jié)省開發(fā)時(shí)間。
我們可以安裝不同的屬性來創(chuàng)建一些代碼文件，如：變量定義的文件、顏色相關(guān)的文件、字體相關(guān)的文件等。
Sass 導(dǎo)入文件
類似 CSS，Sass 支持 @import 指令。
@import 指令可以讓我們導(dǎo)入其他文件等內(nèi)容。
CSS @import 指令在每次調(diào)用時(shí)，都會(huì)創(chuàng)建一個(gè)額外的 HTTP 請(qǐng)求。但，Sass @import 指令將文件包含在 CSS 中，不需要額外的 HTTP 請(qǐng)求。
Sass @import 指令語法如下：
@import filename;
注意：包含文件時(shí)不需要指定文件后綴，Sass 會(huì)自動(dòng)添加后綴 .scss。
此外，你也可以導(dǎo)入 CSS 文件。
導(dǎo)入后我們就可以在主文件中使用導(dǎo)入文件等變量。
以下實(shí)例，導(dǎo)入 variables.scss、colors.scss 和 reset.scss 文件。
Sass 代碼：
@import "variables";
@import "colors";
@import "reset";
接下來我們創(chuàng)建一個(gè) reset.scss 文件：
reset.scss 文件代碼：
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
然后我們?cè)?standard.scss 文件中使用 @import 指令導(dǎo)入 reset.scss 文件：
standard.scss 文件代碼：
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass Partials
如果你不希望將一個(gè) Sass 的代碼文件編譯到一個(gè) CSS 文件，你可以在文件名的開頭添加一個(gè)下劃線。這將告訴 Sass 不要將其編譯到 CSS 文件。
但是，在導(dǎo)入語句中我們不需要添加下劃線。
Sass Partials 語法格式：
_filename;
以下實(shí)例創(chuàng)建一個(gè) _colors.scss 的文件，但是不會(huì)編譯成 _colors.css 文件：
_colors.scss 文件代碼：
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
如果要導(dǎo)入該文件，則不需要使用下劃線：
實(shí)例
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
注意：請(qǐng)不要將帶下劃線與不帶下劃線的同名文件放置在同一個(gè)目錄下，比如，_colors.scss 和 colors.scss 不能同時(shí)存在于同一個(gè)目錄下，否則帶下劃線的文件將會(huì)被忽略。
網(wǎng)站題目：詳解Sass@import與Partials
文章位置：http://www.5511xx.com/article/cdhdccd.html
