SCSS迷你书(下) - SCSS中@指令

最新推荐文章于 2024-07-05 14:30:31 发布

crper

最新推荐文章于 2024-07-05 14:30:31 发布

阅读量4.4k

点赞数

分类专栏：笔记-CSS处理器文章标签： scss sass

本文链接：https://blog.csdn.net/crper/article/details/50774443

版权

SCSS作为CSS的增强版本，提供了丰富的@指令，包括@import、@media、@extend和@at-root等。@import支持相对路径和在线导入；@media可嵌套在CSS规则中，便于样式调整；@extend用于扩展选择器或占位符；@at-root用于跳出当前选择器层级。此外，@debug、@warn和@error则为调试提供了便利。

摘要由CSDN通过智能技术生成

`@import`指令

SCSS的@import是css的加强版本,共有以下几种方式可以互相导入引用;

注意点

可以使用相对路径
导入的文件可以.scss后缀名
可以引入线上的scss文件
支持括入引入的写法
在同一个目录不能同时存在带下划线和不带下划线的同名文件。例如，_navbar.scss 不能与 navbar.scss 并存。
支持引入带下划线和不带下划线的文件;比如(navbar和_navbar)
- 若是文件命名带下划线则不编译该文件,但却可以正常把样式导入其他文件用(如 index.scss 引入_navbar,只产生index.css)
- 若是文件命名*不带下划线**,两者皆会编译,产生CSS文件((如 index.scss 引入navbar,会产生index.css和navbar.css))
支持在CSS 规则和 @media 规引入样式

@import "navbar.scss";                 //直观的引入单一文件
@import "footer" ;
@import "http://test.xx/sidebarbar";
@import url(foo);
@import "navbar","sidebar",&#