如何在Sass的多个文件中使用sass变量| 2种方式的例子

SASS提供了使用@import和@use指令声明一次并在多个文件中使用的变量。

例如_variables.scss

$primary-font-color:blue;

让我们在多个文件中以不同方式使用这个变量。

• use @import directive home.scss

@import "variables"

body{
    color:$primary-font-color;
}

• 使用 @使用指令 home.scss

@use "variables"

body{
    color:variables.$primary-font-color;
}

或者你也可以使用一个带有@use的命名空间，如下所示

home.scss

@use "variables" as v

body{
    color:v.$primary-font-color;
}

@import允许你提供全局范围而没有局部范围，它很快就会被废弃，请避免使用@import。

@use提供了命名的冲突，如果你有多次使用，就可以加载一次。