I am currently implementing SASS in my project and I am facing difficulties with compiling the following code:
.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*/
}
}
}
}
I am encountering the following error: Invalid parent selector for "&--text": "Home stylesheet .section:nth-of-type(2)"
Below is the HTML markup:
<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>
Is it not possible to apply CSS rules to children of pseudo-selectors using nesting? What could be the missing piece here?
Thank you in advance!