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阅读 5,092评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,461评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,954评论 18 399
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,755评论 0 17