導入sass文件


4導入sass文件

sass@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中,而無需發起額外的下載請求。

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"





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM