vue css定义变量 var(--s) 简短代码生成不同样式

在 Vue 中，CSS 样式可以通过多种方式编写，包括内联样式、scoped 样式、全局样式、CSS 模块、预处理器等。以下是几种常见的 Vue CSS 样式示例： ### 1. 内联样式 在 Vue 模板中，可以直接使用 `style` 属性来定义内联样式。 ```html <template> <div :style="{ color: textColor, fontSize: fontSize + 'px' }"> 这是一段使用内联样式的文本 </div> </template> <script> export default { data() { return { textColor: 'red', fontSize: 16 } } } </script> ``` ### 2. Scoped 样式 在 Vue 单文件组件中，可以使用 `scoped` 属性来限定样式的作用范围，仅作用于当前组件。 ```html <template> <div class="example"> 这是一段使用 scoped 样式的文本 </div> </template> <style scoped> .example { color: blue; font-size: 18px; } </style> ``` ### 3. 全局样式 全局样式可以在 `App.vue` 或其他入口文件中定义，作用于整个应用。 ```html <!-- App.vue --> <template> <div id="app"> <router-view/> </div> </template> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } </style> ``` ### 4. CSS 模块 Vue 支持 CSS 模块，可以通过 `module` 属性启用。 ```html <template> <div :class="$style.example"> 这是一段使用 CSS 模块的文本 </div> </template> <style module> .example { color: green; font-weight: bold; } </style> ``` ### 5. 预处理器 Vue 支持 Sass、Less、Stylus 等 CSS 预处理器。 ```html <template> <div class="example"> 这是一段使用 Sass 样式的文本 </div> </template> <style lang="scss"> $primary-color: #42b983; .example { color: $primary-color; font-style: italic; } </style> ``` ### 6. 动态类名绑定 在 Vue 中，可以使用 `v-bind:class`（或简写为 `:class`）来动态绑定类名。 ```html <template> <div :class="{ active: isActive }"> 这是一段动态类名绑定的文本 </div> </template> <script> export default { data() { return { isActive: true } } } </script> <style> .active { background-color: yellow; } </style> ``` ### 7. 使用 CSS 变量 在 Vue 中，可以使用 CSS 变量来实现动态样式。 ```html <template> <div class="example" :style="{'--main-color': mainColor}"> 这是一段使用 CSS 变量的文本 </div> </template> <script> export default { data() { return { mainColor: '#ff0000' } } } </script> <style> .example { color: var(--main-color); } </style> ``` 这些示例展示了在 Vue 中使用 CSS 样式的多种方式，可以根据项目需求选择合适的方法。