带有textarea元素的SASS嵌套问题

所以我遇到了嵌套的问题。我试过根，但这会让我…嗯，是的，根。有人知道这是否可行吗

//无礼

.form{
     .control{
         height:40px;

         &textarea{
              height: 200px;//wont work
         }
     }
}

textarea.control{
    height: 200px;// what i am looking for
}

&textarea

打印

.form.controltextarea

我认为这样做是可行的

.form{
    .control{
        height: 40px;
    }
}

---

看来你所要求的是不可能的。基本上，您正在尝试这样做：

.form {
    .control {
        height: 40px;

        textarea& {
            height: 200px;
        }
    }
}

但是，这会导致编译错误：

“&”只能在复合选择器的开头使用。

这是有充分理由的<代码>&表示父选择器的绝对路径。在本例中，

&

是

.form.control

，因此您将得到

textarea.form.control

。你可以这样写来证明这一点，它实际上会编译：

.form {
    .control {
        height: 40px;

        textarea#{&} {
            height: 200px;
        }
    }
}

所以，如果你真的不想这么做

.form {
    .control {
        height: 40px;
    }

    textarea.control {
        height: 200px;
    }
}

。。。因为也许你不想写两次

.control

，那么我认为你最好的选择是利用插值（

{…}

）如下：

.form{
    $controlClassName: '.control';
    #{$controlClassName} {
        height: 40px;
    }

    textarea#{$controlClassName} {
       height: 200px;
    }
}

---

我理解。。。请检查我编辑的答案！是的，这是可行的，但这不是我正在寻找的方式；-）在某些情况下，您可以在选择器后面添加&运算符。。。但是会产生一些问题。