uniapp css3 :root 写在哪里|极客教程

uniapp css3 :root 写在哪里

什么是 :root 选择器

在 CSS 中， :root 伪类选择器是用来选择文档的根元素的，通常指的是 <html> 标签。使用 :root 选择器可以声明全局的 CSS 变量，并且这些变量会在整个文档中生效。这样可以方便地统一管理样式。

在 uni-app 中的使用

uni-app 是一个基于 Vue.js 的跨平台开发框架，允许开发者一次编写，多端发布，涵盖了微信小程序、H5、App等多个平台。在 uni-app 中，我们可以使用 :root 选择器来定义全局的 CSS 变量，这样就能够统一管理各个平台的样式。

在哪里写 :root

在 uni-app 中，我们可以将 :root 写在全局的 css 文件中，以便在整个应用中生效。在 uni-app 项目中，通常会有一个 App.vue 和一个 App.vue 所在的同级目录的 App.vue 文件。我们可以直接在 App.vue 文件中定义 :root。

下面是一个示例：

/* App.vue */

:root {
  --primary-color: #FF0000;
  --secondary-color: #00FF00;
}

在这个示例中，我们定义了两个全局的 CSS 变量 --primary-color 和 --secondary-color，分别代表主要颜色和次要颜色。这样在整个应用中，我们都可以使用这两个变量来设置颜色，而不用每次都写具体的颜色数值。

如何使用 :root 定义的变量

在 uni-app 中，使用 :root 定义的变量也非常简单。我们只需要在样式中使用 var(--variable-name) 来引用这些变量即可。下面是一个示例：

/* styles.css */

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

在这个示例中，我们定义了两个类 .text-primary 和 .text-secondary，分别使用了 --primary-color 和 --secondary-color 这两个变量。这样在 HTML 模板中使用这两个类，就可以自动应用 :root 中定义的颜色值。

<!-- index.vue -->

<template>
  <view class="text-primary">Primary Text</view>
  <view class="text-secondary">Secondary Text</view>
</template>

<style lang="scss" src="./styles.css"></style>

在这个示例中，我们在一个组件的 template 中使用了 .text-primary 和 .text-secondary 这两个类，从而应用了 :root 中定义的颜色值。