SASS与textarea元素嵌套问题

Question

所以我遇到了嵌套问题。我已经尝试过@根，但这会让我... ...好耶。任何人有一个想法，如果这是可能的？

//青菜

.form{ 
    .control{ 
     height:40px; 

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

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

Answer 1

看来你问的是不可能的。从本质上讲，你正在试图做到这一点：

.form { 
    .control { 
     height: 40px; 

     textarea& { 
      height: 200px; 
     } 
    } 
} 

然而，这会导致编译错误："&" may only be used at the beginning of a compound selector.这是一个很好的理由; &表示父选择器的绝对路径。在这种情况下，&是.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; 
    } 
} 

Answer 2

&textarea 打印.form .controltextarea

我想用这种方式可以工作

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