Demo: https://codepen.io/moradxd/pen/WJpPyQ
Consider this sample HTML code:
<body class="boxed">
<div class="text-white">
<a href="#" class="btn-featured">Button</a>
</div>
</dody>
I am implementing the following SASS code:
.boxed {
// issue with using "Ampersand"
body& {
}
}
However, this leads to a compilation error which states:
https://i.sstatic.net/X8F0J.png
Even though I desire the output to be like this:
// Desired output
body.boxed {
}
I am aware that I can achieve the desired result by using the following syntax:
// Alternate solution
body {
&.boxed {
}
}
However, I prefer to separate the code for the .boxed class from the CSS code inside the body for organizational purposes.
So, why is this not permitted when a similar code structure for an element and its parent works perfectly fine like in the following example:
// Although this similar code for element and
// its parent is effective
.btn-featured {
.text-white & {
font-size: 30px;
}
}
I am genuinely curious to understand why this specific syntax is not allowed!