编译成一个文件时，sass变量会被覆盖

Question

我有一个sass的设置，我需要一种存储值的方法，而不会在我将所有css缩小到一起时被覆盖。

我有一个模板scss文件，用于设置具有类选择器的特定标签。 然后我在每个html页面上都有一个body id选择器。每个html页面都有自己独特的scss文件。 我需要一种方法将唯一的body id选择器分配给变量，以便它可以用于将唯一的页面id附加到模板scss文件中每个类的开头。例如：

template.scss

    $basePageID: "";

    #{$basePageID} .myclass{

    }
   #{$basePageID} .myclass2{

    }

现在在我的html特定scss文件中，我有这个设置。

**homepage.scss**

    @import "template.scss";
    $basePageID: "#home";

    #{$basePageID} .myclass{

    }

**contact.scss**
    @import "template.scss";
    $basePageID: "#contact";

    #{$basePageID} .myclass{

    }

好的，希望你能看到我在这里想做的事情。问题是当我的所有css文件都缩小时，$ basePageID变量将被设置为要添加的最后一个css文件。我需要一种能够为每个scss文件传递模板唯一页面ID的方法，即使所有文件都合并到一个css文件中也是如此。不知道我怎么能在scss中做到这一点

Answer 1

你不能这样做......

template.scss：

#{$basePageID} .myclass{

}
#{$basePageID} .myclass2{

}

homepage.scss：

$basePageID: "#home";
@import "template.scss";

#{$basePageID} .myclass{

}

对我来说，看起来你在错误的时间覆盖了basePageID。