vue2 sass 公用变量

在Vue2和Sass中，可以通过使用公用变量来实现样式的复用和全局控制。

首先，我们需要在Vue项目中安装并配置Sass。可以使用命令`npm install sass-loader node-sass --save-dev`来安装相关依赖。接着，在项目的webpack配置文件中配置Sass的loader，具体的配置方式可以参考Sass Loader的文档。

安装和配置完成后，我们可以在项目的某个公用样式文件中定义变量。创建一个名为_variables.scss的文件，并在其中定义我们想要的样式变量。例如，我们可以定义颜色变量如下：

$primary-color: #ff0000;
$secondary-color: #00ff00;

然后，我们在vue组件中将这个公用变量引入，并使用它来设置样式。在组件的style标签中，通过使用`@import`语句将_variables.scss文件引入：

<style lang="scss" scoped>
@import 'path/to/_variables.scss';

.my-component {
  background-color: $primary-color;
  color: $secondary-color;
}
</style>

这样，我们就可以在Vue组件中直接使用定义好的变量来设置样式。当需要修改颜色时，只需要修改_variables.scss中的变量值即可，这样会自动应用到所有使用该变量的地方。

当然，我们还可以在项目的其他组件或样式文件中同样引入_variables.scss文件，这样也可以共享这些变量。这样做不仅可以减少重复的样式代码，还可以方便地进行全局样式的调整和控制。

总结起来，通过使用公用变量，我们可以在Vue2和Sass中实现样式的复用和全局控制，提高开发效率，并减少样式代码的重复。