解释如何将类与SASS一起使用到Python思想家
[英]Explaining how to use classes with SASS to a Python thinker
问题描述
I am coming from object-oriented Python-land and need help with a basic question as I learn SASS (+compass/susy) and CSS. 
我来自面向对象的Python-land，在学习SASS（+ compass / susy）和CSS时需要一个基本问题的帮助。 Globally, I am struggling to understand how to relate classes and variables as I understand it in Python. 在全球范围内，我正在努力理解如何将类和变量联系起来，正如我在Python中理解的那样。
I have a navigation bar and want all h1 tags in the navbar to be bold, but all h1 tags in the body of the html doc to be blue. 我有一个导航栏，并希望导航栏中的所有h1标签都是粗体，但html文档正文中的所有h1标签都是蓝色的。 How would I structure my screen.scss file to reflect what I am trying to do? 我如何构建我的screen.scss文件以反映我想要做的事情？
To make it a little more complicated, let's say I have more tags, like an h2 tag that I want to do the same thing with as well (except this time I want h2 to be italic and red respectively). 为了使它更复杂一点，让我说我有更多的标签，比如我想做同样的事情的h2标签（除了这次我希望h2分别是斜体和红色）。 In this case, can I start using a class selector instead of an id? 在这种情况下，我可以开始使用类选择器而不是id吗？ Is there a way to nest my sass file such that h1 and h2 tags are only modified if they are under class='navbar' ? 有没有办法嵌套我的sass文件，只有当它们在class='navbar'下时才修改h1和h2标签？ In python, I would say something like: 在python中，我会说：
class navbar
h1 = make it bold
h2 = make it italic
h1 = make it blue
h2 = make it red
In SASS-land, how would you structure your screen.sass file such that I can just assign each html tag ( <htmltag class='navbar'> and everything behaves appropriately? Or, if there is a better way to do this with a ton of elements, I am open to that as well. 在SASS-land中，你如何构建你的screen.sass文件，这样我就可以分配每个html标签（ <htmltag class='navbar'>并且一切行为都适当？或者，如果有更好的方法来执行此操作大量元素，我也对此持开放态度。
Thank you. 谢谢。
3 个解决方案
解决方案1
2 2013-08-18 20:12:06
Your pseudo-code is almost exactly the same as SASS: 您的伪代码几乎与SASS完全相同：
.navbar
h1
font-weight: bold
h2
font-style: italic
body
h1
color: blue
h2
color: red
解决方案2
2 已采纳 2013-08-18 20:27:17
You don't need classes or variables for your use case. 您的用例不需要类或变量。 Say you have a HTML document like this (notice that we're using a nav element for navigation, so there's no need for a navbar class): 假设您有这样的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>
... then to get all of the effects you ask about in your question, the following SASS is enough: ...然后在您的问题中获得您询问的所有效果，以下SASS就足够了：
nav
h1
font-weight: bold
h2
font-style: italic
main
h1
color: blue
h2
color: red
I'm assuming from the way you word your question that when you say 'the body of the html' document, you're referring to some 'main' content which is separate from that in the navbar, rather than everything in the body element (which would include the navbar). 我假设从你说出你的问题的方式，当你说'html'文件的主体时，你指的是一些与导航栏中的内容分开的 '主要'内容，而不是在body元素中的所有内容（ 包括导航栏）。 If that assumption is wrong and you do indeed want everything to be coloured, but only navbar headings emboldened/italicized, you'd do this: 如果这个假设是错误的并且您确实希望所有内容都被着色，但只有导航栏标题更加粗体/斜体，那么您可以这样做：
nav
h1
font-weight: bold
h2
font-style: italic
h1
color: blue
h2
color: red
解决方案3
0 2013-08-18 20:15:46
I know that my answer is kinda generic, but I found your question also generic. 我知道我的答案有点通用，但我发现你的问题也是通用的。 I'll suggest to read more about OOCSS, here or here for example. 我建议在这里或这里阅读更多关于OOCSS的内容。 It's also a good idea to check the Brad's Atomic design . 检查Brad的Atomic设计也是一个好主意。 I don't think that preprocessor matter so much. 我不认为预处理器这么重要。 It's more like a conceptual problem. 这更像是一个概念问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.