@import用于導入scss文件
@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當前樣式表中。無論你在全局作用域寫這條命令,還是在任何塊里任何角落里寫這條命令,都相當于把文件所有內容復制到寫命令的那個位置。
所有在被導入文件中定義的變量和混合器(@mixin)均可在導入文件中使用。
有些scss文件你并不需要編譯,你只想把它們當做被import的文件,這類scss文件叫局部文件,有一個規定,是局部文件的文件名要以下劃線開頭,比如_sidebar.scss,引用它就寫@import "themes/sidebar";,可以看到,不用寫下劃線。
進階:!default標記相當于一個建議的初始值
比如我拿到了一個github上的優秀的scss庫,想定制,怎么定制?通常scss庫都會給你一個列表,允許你修改某些變量,以編譯出屬于你自己的代碼。所以,SASS的規則是:
首先你在引入庫之前,定義一系列的變量,假設我先定義了一個變量,$a = 1px;
;
然后,我引入了一個庫,它是一個局部文件,這個局部文件中有一行寫著$a = 2px !default;
;
最終$a的值是1px,盡管局部文件后于你定義變量,但是2px有!default標記,是建議值,只要你定義過$a,那么就以你為準。
因為一個庫不止定義一個變量,如果有些變量你沒有重定義值,那么就以建議值為準。