Trouble using BEM with SASS - sass

Question

I am trying to integrate BEM into my sass. I am also using Gulp. When I don't use BEM my code works fine. When I include BEM, the code no longer works.
Here is my HTML with out BEM.
<div class="wrapper">
<ul class="stage">
<li class="scene">
<div class="movie">
<div class="poster"></div>
</div>
</li>
</ul>
</div>
Here is my SASS
.wrapper{
margin: 100px auto;
max-width: 960px;
.stage{
list-style: none;
padding: 0;
.scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
perspective: 1000px;
}
}
}
Here is my HTML using BEM
<div class="wrapper">
<ul class="stage">
<li class="stage__scene">
<div class="movie">
<div class="poster"></div>
</div>
</li>
</ul>
</div>
Here is my SASS with BEM
.wrapper{
margin: 100px auto;
max-width: 960px;
.stage{
list-style: none;
padding: 0;
&__scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
perspective: 1000px;
}
}
}
I am new to BEM so I am pretty sure I am missing something obvious. Please let me know.

Answer 1

I'm unsure what "no longer works". But your CSS / SASS code doesn't conform to BEM. BEM deliberately limits the use of cascading. Because blocks are independent, a block (.stage) shouldn't be styled as a descendant of another block (.wrapper).
Here is a BEM-compliant SASS code:
.wrapper{
margin: 100px auto;
max-width: 960px;
}
.stage{
list-style: none;
padding: 0;
&__scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
perspective: 1000px;
}
}
See also: the official BEM methodology.

Answer 2

I don't think this is a BEM issue, but an "issue" with SASS compiler. I don't know that you can do class concatenation like that. The way you have the sass written is looking for a div with 2 separate classes, stage and __scene on the same element, not a single class called stage__scene on a nested element.
Your sass should look like this:
.wrapper{
margin: 100px auto;
max-width: 960px;
.stage{
list-style: none;
padding: 0;
.stage__scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
perspective: 1000px;
}
}
}