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