4導入sass文件
sass
的@import
規則在生成css
文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css
文件中,而無需發起額外的下載請求。
1 sass
局部文件的文件名以下划線開頭。這樣,sass
就不會在編譯時單獨編譯這個文件輸出css
,而只把這個文件用作導入。當你@import
一個局部文件時,還可以不寫文件的全名,即省略文件名開頭的下划線。
2 默認變量值
!default
用於變量,含義是:如果這個變量被聲明賦值了,那就用它聲明的值,否則就用這個默認值。與css 中 !important 相反作用
3.你不能用sass
的@import
直接導入一個原始的css
文件,因為sass
會認為你想用css
原生的@import
。但是,因為sass
的語法完全兼容css
,所以你可以把原始的css
文件改名為.scss
后綴,即可直接導入了
4.靜默注釋
body { color: #333; // 這種注釋內容不會出現在生成的css文件中 padding: 0; /* 這種注釋內容會出現在生成的css文件中 */ }
當注釋出現在原生css
不允許的地方,如在css
屬性或選擇器中,sass
將不知如何將其生成到對應css
文件中的相應位置,於是這些注釋被抹掉。
如果需要導入 SCSS 或者 Sass 文件,但又不希望將其編譯為 CSS,只需要在文件名前添加下划線,這樣會告訴 Sass 不要編譯這些文件,但導入語句中卻不需要添加下划線。
例如,將文件命名為 _colors.scss,便不會編譯 _colours.css 文件。
@import "colors";
上面的例子,導入的其實是 _colors.scss 文件
注意,不可以同時存在添加下划線與未添加下划線的同名文件,添加下划線的文件將會被忽略
sass的導入( @import)規則和CSS的有所不同,編譯時會將 @import的scss文件合並進來只生成一個CSS文件。但是如果你在sass文件中導入css文件如 @import 'reset.css',那效果跟普通CSS導入樣式文件一樣,導入的css文件不會合並到編譯后的文件中,而是以@import方式存在。
所有的sass導入文件都可以忽略后綴名 .scss。一般來說基礎的文件命名方法以_開頭,如 _mixin.scss。這種文件在導入的時候可以不寫下划線,可寫成 @import "mixin"