@import

@import url('xxx.css')  引用css文件直接运行，运行时使用

@import 'xxx.scss'  引用scss文件，编译成css进行使用

@use

@use '../../abc.scss'  //通过使用文件名作为命名空间，使用某个css

@use '../../abc.scss' as b  //将文件通过自定义的命名b作为命名空间，使用某个css

@use '../../abc.scss' as *  //没有命名空间导入编译后的css

说明

在使用@import时，会出现某些问题：

与js的语法类似，不利于理解
将文件导入会产生变量冲突问题，后面的导入文件会覆盖之前导入文件的css变量

当需要使用内部css变量时，我们需要以$_data下划线的格式进行变量的声明

扩展和混合

混合：@include

使用混合是对样式内容的复制

扩展：@extend

使用扩展是对样式内容的继承

两者实现相同功能的样式时，使用扩展会比使用混合所编译出css要好，好处在于编译出的css代码量会更少，从而数据请求时间越短，运行快，用户体验好

占位符：%xxx

当我们不需要编译出某个类时，如继承类，而类不是最终的结果类，这是我们可以使用占位符，继承的类不会出现在最终生成的css中