uniapp创建css
uniapp 中创建 CSS 的方法
在 uniapp 中创建 CSS 样式可以通过以下几种方式实现，每种方式适用于不同的场景和需求。
内联样式
直接在组件的 style 标签中编写 CSS 代码，适用于当前组件的样式定义。
<template>
<view class="container">
<text class="text">Hello Uniapp</text>
</view>
</template>
<style>
.container {
padding: 20px;
}
.text {
color: #007AFF;
font-size: 16px;
}
</style>全局样式
在 App.vue 中定义全局样式，适用于整个应用共享的样式。
<style>
/* App.vue 中的全局样式 */
page {
background-color: #F5F5F5;
}
.text-primary {
color: #007AFF;
}
</style>外部样式文件
通过引入外部 CSS 文件实现样式复用，适用于跨组件共享样式。
-
创建外部 CSS 文件（如
common.css）：/* common.css */ .common-text { font-size: 14px; color: #333; } -
在组件中引入：
<style> @import "../../common.css"; </style>
条件编译样式
通过条件编译实现多平台差异化样式，适用于不同平台的样式适配。
<style>
/* #ifdef H5 */
.text {
color: #007AFF;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.text {
color: #07C160;
}
/* #endif */
</style>动态样式绑定
通过 Vue 的数据绑定实现动态样式，适用于需要根据数据变化的样式。
<template>
<view :class="{ active: isActive }">动态样式</view>
</template>
<script>
export default {
data() {
return {
isActive: true
}
}
}
</script>
<style>
.active {
color: red;
}
</style>使用 SCSS/SASS
通过预处理器增强 CSS 功能，适用于复杂样式需求。
-
安装依赖：
npm install sass sass-loader -D -
在组件中使用：
<style lang="scss"> $primary-color: #007AFF; .text { color: $primary-color; } </style>
注意事项
- 避免使用过于复杂的选择器，保持样式简洁。
- 优先使用类选择器而非标签选择器，减少样式冲突。
- 合理使用
scoped属性限制样式作用域。 - 注意平台差异，必要时使用条件编译。
