样式

gitcx

# 介绍

主要介绍如何在项目中使用和规划样式文件。

默认使用 less 作为预处理语言，建议在使用前或者遇到疑问时学习一下Less 的相关特性（如果想获取基础的 CSS 知识或查阅属性，请参考MDN文档。

项目中使用的通用样式，都存放于src/styles/下面。

以common、tailwind文件已在 App.vue 中全局引入

├── common # 公共类
├── tailwind # tailwind 类库
├── transition # 动画
└── var # 变量

全局注入 var.less 这个文件会被全局注入到所有文件，所以在页面内可以直接使用变量而不需要手动引入

<style lang='less' scoped>
// 这里已经隐式注入了 var.less
</style>

项目中引用到了tailwindcss具体可以见文件使用说明。

<div class='flex mx-4 px-4'></div>

习惯less作为样式语言，sass有些情况下，会出现比如，安装等问题，不习惯的less的，自行切换一下，不难，就是很繁琐。

有时我们可能想明确地制定一个针对子组件的规则。

如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>操作符。有些像Sass之类的预处理器无法正确解析>>>，这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。