&之间的差异签署与否登录Sass? [英] Difference between & sign and no & sign in Sass?
问题描述
这可能是一个非常简单的答案,但我在任何地方都找不到.我可能以某种方式错过了一个非常基本的CSS规则.
这是我的Sass代码:
h3 {font-size:20px;底边距:10px;& .some-selector {font-size:24px;底边距:20px;}}
输出:
h3 {font-size:20px;底边距:10px;}h3.some-selector {font-size:24px;底边距:20px;}
如果我拉'&'有什么区别?搁笔?它只是在"h3"和".some-selctor"之间添加了一个空格.父母与孩子之间的空间是什么意思?实际上有什么区别吗?预先感谢.
使用&符号将应用规则如果"当前元素已应用伴随类.
因此在您的示例中,&
规则(较大的字体大小和下边距)仅在 h3
也具有类 .some-selector的情况下适用
.例如:
< h3 class ="some-selector">我的标题是</h3>
如果删除了&
符号,则现在正在为其子级(您注意到的空间)定义一个规则.这样就可以使用html这样的HTML了,
< h3>我的标题< span class ="some-selector">这是</span></h3>
您可以在此处了解更多信息: https://css-tricks.com/the-sass-ampersand/ >
This might be a very simple answer but I couldn't find it anywhere. Might be I missed a very basic CSS rule somehow.
Here is my Sass code:
h3 {
font-size: 20px;
margin-bottom: 10px;
&.some-selector {
font-size: 24px;
margin-bottom: 20px;
}
}
Output:
h3 {
font-size: 20px;
margin-bottom: 10px; }
h3.some-selector {
font-size: 24px;
margin-bottom: 20px; }
What difference does it make if I pull the '&' sign off? It just adds a space between 'h3' and '.some-selctor'. What's the meaning of this space between parent and child? Is there any difference actually? Thanks in advance.
Using the & symbol will apply the rule "if" the current element has the accompanying class applied.
So in your example, the &
rules (bigger font size and bottom margin) only apply IF the h3
also has the class .some-selector
. eg:
<h3 class="some-selector"> My heading this is</h3>
If you removed the &
sign, you are now defining a rule for its children (the space you noticed). So that would work with html such as:
<h3> My heading <span class="some-selector">this is</span></h3>
You can read more on this here: https://css-tricks.com/the-sass-ampersand/
这篇关于&之间的差异签署与否登录Sass?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!