在CSS排版中选择
在CSS排版中选择
提问于 2014-05-09 08:30:07
我正在尝试我的最新项目，选择排版。到目前为止效果很好。下面是我的基类.typography：
.typography
a
@extend .link
i, em
@extend .italic
b, strong
@extend .bold
h1, .h1
@extend .h1
h2, .h2
@extend .h2
h3, .h3
@extend .h3
h4, .h4
@extend .h4
h5, .h5
@extend .h5
h6, .h6
@extend .h6
p, ul, ol, pre, address
@extend .block-margins
ul
@extend .unordered-list
ol
@extend .ordered-list
pre, code
@extend .fixed然后，我只需将它应用到任何块的父元素中，我想要这样的样式。
例如，当我到达一个需要选择加入的p时，我的问题就出现了，而将一个<div class="typography"> ... </div封装起来仅仅是为了选择它，似乎有点过分了。我更愿意直接将.typography类添加到<p>中。
我是否可以使用任何技巧来修改我当前的排版类，以允许它按原样工作，但当我将排版类应用到任何元素中时也是如此。所以我基本上需要：
.typography
p
[STYLES]和
p.typography
[SAME STYLES]对此有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-09 12:55:39
在Sass方面，这可能比您希望的要详细一些，但这是您将获得的最佳结果：
%link {
color: blue;
}
%block-margins {
margin: 1rem 0;
}
@mixin typography {
&.typography, .typography & {
@content;
}
}
a {
@include typography {
@extend %link;
}
}
p, ul, ol, pre, address {
@include typography {
@extend %block-margins;
}
}输出：
a.typography, .typography a {
color: blue;
}
p.typography, .typography p, ul.typography, .typography ul, ol.typography, .typography ol, pre.typography, .typography pre, address.typography, .typography address {
margin: 1rem 0;
}Stack Overflow用户
发布于 2014-05-09 09:43:25
要使其至少成为一个可重用且不重复的代码，您应该将您的样式定义为：
.typography
a
@extend .link
...然后使用以前的方法添加其他内容：
a.typography
@extend .typography a
...通过这样做，您至少会有一个单一的维护点，即使您的风格将被复制。
Stack Overflow用户
发布于 2014-05-09 09:36:18
我不认为这是一个完美的解决方案，但让它发挥作用的一个方法是重新分配您的风格：
p, ul, ol, pre, address {
&.typography {
@extend .block-margins;
}
}可能会工作，直到您找到一个更好的解决方案，不会产生重复的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23559957
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号