通达科技 - 宜兴电脑维护及IT服务外包服务商

有很多方法可以使 SCSS 更加简洁和简化。第一步是确定是否需要自定义代码。

Odoo的Web客户端被设计为模块化，这意味着（潜在的）所有类都可以在视图之间共享。在创建新类之前，请先检查代码。很可能已经有一个类或HTML标签可以做到你想要的事情。

此外，Odoo 还依赖于 Bootstrap (BS) ，这是一个最完整的 CSS 框架之一。该框架已经被定制，以匹配 Odoo 的设计（包括社区版和企业版），这意味着您可以直接在 Odoo 中使用任何 BS 类，并获得与我们的用户界面一致的视觉效果。

以下章节描述了在自定义代码是唯一选择时，简化 SCSS 代码的技巧。

浏览器默认值

默认情况下，每个浏览器都使用 用户代理样式表 来呈现内容。为了克服浏览器之间的不一致性，其中一些规则被 Bootstrap Reboot <https://getbootstrap.com/docs/5.1/content/reboot/> _覆盖。

在这个阶段，所有的“浏览器特定装饰”规则都被剥离了，但是一大部分定义基本布局信息的规则被保留（或者由于一致性原因被 Reboot 加强）。

你可以依赖这些规则。

div.element {
   display: block;
   /* not needed 99% of the time */
}

span.element {
   display: block;
   /* replace <span> with <div> instead
      to get 'display: block' by default */
}

这是一份不全面的默认规则清单：

HTML 标签

可能看起来很明显，但使文本看起来像标题的最简单和最**一致**的方法是使用标题标签（<h1>，<h2>，…）。除了重启规则外，几乎所有标签都带有由Odoo定义的装饰样式。

<span class="o_module_custom_title">
   Hello There!
</span>

<span class="o_module_custom_subtitle">
   I'm a subtitle.
</span>

<h5 class="o_module_custom_title">
   Hello There!
</h5>

<div class="o_module_custom_subtitle">
   <b><small>I'm a subtitle.</small></b>
</div>