@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,那么就以你为准。
因为一个库不止定义一个变量,如果有些变量你没有重定义值,那么就以建议值为准。