使用时出现sass错误：nth-​​child /：nth-​​of-type选择器

Question

我在我当前的项目中使用sass并且无法弄清楚为什么不能编译：

.section {
    &:first-of-type {
        background: url("../img/misc/.jpg") center center no-repeat;
        background-size: cover;
        &--text {
            &--title {
                /*THIS WON'T COMPILE*/
            }
            &--subtitle {
                /*THIS WON'T COMPILE*/
            }
            &--subscribe {
                &--input {
                    /*THIS WON'T COMPILE*/
                }
                &--button {
                    /*THIS WON'T COMPILE*/
                }
            }
        }
    }
    &:nth-of-type(2) {
        &--text {
            &--title {
                /*THIS WON'T COMPILE*/
            }
            &--paragraph {
                /*THIS WON'T COMPILE*/
            }
       }
   }
   }

我收到此错误： “＆amp; - text”的父选择器无效：“Home stylesheet .section：nth-​​of-type（2）”

这是我的HTML：

<section class="section"> <!-- Cover section -->
            <div class="section--text">
                <h1 class="section--text--title">
                    Main title
                </h1>
                <p class="section--text--subtitle">
                    Some text
                </p>
                <div class="section--text--subscribe">
                    <input class="section--text--subscribe--input" type="email" placeholder="Your email">
                    <button class="section--text--subscribe--button">button</button>
                </div>
            </div>
        </section>
        <section class="section"> <!-- Problem section -->
            <img src="img/ipad.jpg" alt="App screenshot">
            <div class="section--text">
                <h2 class="section--text--title">
                     Title
                </h2>
                <p class="section--text--paragraph">
                    Some text
                </p>
            </div>
         </section>

我不能使用嵌套将css规则应用于伪选择器的子节点吗？我在这里缺少什么？

非常感谢！

Answer 1

你误解了＆amp;的使用嵌套选择器。您的第一个嵌套选择器将编译为（如果可能）.section:first-of-type --text。要使用子类，您需要包含完整的类名（包括。选择器）。这应该可以正常工作：

.section {
    &:first-of-type {
        background: url("../img/misc/.jpg") center center no-repeat;
        background-size: cover;
        &.section--text {
            &.section--text--title {
                /*THIS WON'T COMPILE*/
            }
            &.section--text--subtitle {
                /*THIS WON'T COMPILE*/
            }
            &.section--text--subscribe {
                &.section--text--subscribe--input {
                    /*THIS WON'T COMPILE*/
                }
                &.section--text--subscribe--button {
                    /*THIS WON'T COMPILE*/
                }
            }
        }
    }
    &:nth-of-type(2) {
        &.section--text {
            &.section--text--title {
                /*THIS WON'T COMPILE*/
            }
            &.section--text--paragraph {
                /*THIS WON'T COMPILE*/
            }
       }
   }

}

＆＃39;＆amp;＆＃39;与CSS中的空格类似。更多信息：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector