SCSS筆記3 - 導入

@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,那么就以你為準。

因為一個庫不止定義一個變量,如果有些變量你沒有重定義值,那么就以建議值為準。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 基礎 聲明變量 普通變量 默認變量 變量覆蓋:只需要在默認變量之前重新聲明下變量即可 變量的調用 局部變量和全局變...
    Jill1231閱讀 1,311評論 0 1
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,933評論 18 139
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,765評論 18 399
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,523評論 0 17