scss 定义全局变量

在SCSS中，可以使用 `$` 符号定义全局变量。例如：

$primary-color: #007bff;
$secondary-color: #6c757d;

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

h1 {
  color: $secondary-color;
}

在上面的代码中，我们定义了两个全局变量 `$primary-color` 和 `$secondary-color`，然后在 `body` 的样式中使用了 `$primary-color`，在 `h1` 的样式中使用了 `$secondary-color`。这样做可以方便地在整个项目中使用同样的颜色，而不需要在每个样式中重复定义。

相关问题

scss定义全局变量

在Vue项目中，可以使用全局变量来定义scss样式。有几种方法可以实现这个目的。首先，可以在Vue文件组件中使用全局变量。在`<style>`标签中，通过`@import`语句引入全局的scss文件，然后在样式中使用全局变量。例如，在`<style>`标签的`scoped`和`lang`属性中，可以引入全局的scss文件，并在其中定义全局变量。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [全局Scss变量引入配置](https://blog.csdn.net/lm278858445/article/details/115323600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [（配置）vue中scss配置全局变量使用](https://blog.csdn.net/weixin_42681555/article/details/122346500)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [SCSS全局变量的配置（vue3+vite）](https://blog.csdn.net/weixin_45809580/article/details/130943106)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

uniapp scss定义全局变量

在UniApp中定义全局变量可以通过使用SCSS来实现。首先，你需要在uni.scss文件中引入一个variable.scss文件，可以使用以下代码：

// 引入公共scss变量文件
@import './static/css/variable.scss';

接下来，你需要在App.vue文件中的style标签中添加lang="scss"属性，并在第一行引入uview-ui的index.scss文件以及其他需要的公共css文件，如base.css、common.scss和iconfont.css。可以使用以下代码：

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss"; /*每个页面公共css */
@import './static/css/base.css'; /* scss公共类 */
@import './static/css/common.scss';
@import './static/fonts/iconfont.css';
</style>

接下来，你可以在common.scss文件中使用@import指令引入variable.scss文件，并定义公共的样式类。例如，你可以使用以下代码定义一个color-primary类和一个bg-primary类，其中使用了variable.scss文件中定义的$primary-color变量：

@import './variable.scss'; // 引入公共scss变量文件

// 公共类
.color-primary {
  color: $primary-color;
}

.bg-primary {
  background-color: $primary-color;
  color: #fff;
}

这样，你就成功在UniApp中定义了全局的SCSS变量和样式类。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp 添加scss全局变量、scss公共类](https://blog.csdn.net/qq_40146789/article/details/124835164)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]