向 Python tkinter 解释如何使用带有 SASS 的类答案

【问题标题】：Explaining how to use classes with SASS to a Python thinker向 Python tkinter 解释如何使用带有 SASS 的类
【发布时间】：2013-08-19 04:27:17
【问题描述】：

我来自面向对象的 Python 领域，在学习 SASS（+compass/susy）和 CSS 时需要帮助解决一个基本问题。在全球范围内，我正在努力理解如何将类和变量关联起来，就像我在 Python 中所理解的那样。

我有一个导航栏，希望导航栏中的所有h1 标记为粗体，但html 文档正文中的所有h1 标记为蓝色。我将如何构建我的 screen.scss 文件以反映我正在尝试做的事情？

为了让它更复杂一点，假设我有更多标签，比如h2 标签，我也想做同样的事情（除了这次我希望h2 分别是斜体和红色）。在这种情况下，我可以开始使用类选择器而不是 id 吗？有没有办法嵌套我的sass文件，这样h1和h2标签只有在class='navbar'下才会被修改？在 python 中，我会这样说：

class navbar
    h1 = make it bold
    h2 = make it italic

h1 = make it blue
h2 = make it red

在 SASS-land 中，您将如何构建您的 screen.sass 文件，以便我可以分配每个 html 标签（<htmltag class='navbar'> 并且一切都正常运行？或者，如果有更好的方法可以使用大量元素，我也对此持开放态度。

谢谢。

【问题讨论】：

(S)CSS（或者实际上是 HTML）中的单词 class 与 python 中的含义不同。不要试图匹配它们。

标签： python html css sass

【解决方案1】：

您的用例不需要类或变量。假设您有一个这样的 HTML 文档（请注意，我们使用 nav 元素进行导航，因此不需要 navbar 类）：

<!doctype html>
<html>
  <head>
    <title>An example document</title>
  </head>
  <body>
    <nav>
      <h1>A navigation heading</h1>
      <h2>A subheading</h2>
      <!-- etc. -->
    </nav>
    <main>
      <h1>A general heading</h1>
      <h2>A subheading</h2>
      <!-- etc. -->
    </main>
  </body>
</html>

...那么要获得您在问题中询问的所有效果，以下 SASS 就足够了：

nav
  h1
    font-weight: bold
  h2
    font-style: italic

main
  h1
    color: blue
  h2
    color: red

我假设从您提出问题的方式来看，当您说“html 文档的正文”时，您指的是一些与导航栏，而不是 body 元素中的所有内容（这将包括导航栏）。如果该假设是错误的，并且您确实希望对所有内容进行着色，但仅将导航栏标题加粗/斜体，则可以这样做：

nav
  h1
    font-weight: bold
  h2
    font-style: italic

h1
  color: blue

h2
  color: red

【讨论】：

【解决方案2】：

你的伪代码和 SASS 几乎一模一样：

.navbar
    h1
        font-weight: bold
    h2
        font-style: italic
body
    h1
        color: blue
    h2
        color: red

【讨论】：

【解决方案3】：

我知道我的回答有点笼统，但我发现您的问题也很笼统。我建议阅读更多关于 OOCSS、here 或 here 的信息。检查布拉德的Atomic design 也是一个好主意。我不认为预处理器那么重要。这更像是一个概念问题。

【讨论】：