&之间的差异签署与否登录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屋！