css - Sass bootstrap unable to set height of textarea -

i have admin page this:

<div class="admin_page">     <div ng-repeat="user in users">         <div class="my-form-group">             <textarea class="my-form-control">{{user}}</textarea>         </div>     </div> </div> 

this main.scss file:

.my-form-group {   @extend .form-group;    .my-form-control {     @extend .form-control   } }  @import "./admin.scss"; 

this admin.scss:

.admin_page {   textarea {     height: 200px;   } } 

the height of text area not set.

i tried <textarea class="my-form-control" style="height:200px">{{user}}</textarea> , works.

why sass version not working?

edit:

this heading:

    <!--underscore-->     <script src="/node_modules/underscore/underscore-min.js"></script>      <!--jquery-->     <script src="/node_modules/jquery/dist/jquery.min.js"></script>      <!--bootstrap (keep css although duplicate in bundle, since may depend on it)-->     <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">      <!--font-awesome-->     <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">       <!--summernote-->     <link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">     <!--<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">-->     <script src="/node_modules/summernote/dist/summernote.min.js"></script>       <!--angular-->     <script src="/node_modules/angular/angular.min.js"></script>     <script src="/node_modules/angular-resource/angular-resource.min.js"></script>     <script src="/node_modules/angular-route/angular-route.min.js"></script>     <script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>      <!--angular-summernote-->     <script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>      <!--bundle-->     <script src="/public/script/bundle.js"></script>     <link rel="stylesheet" type="text/css" href="/public/style/bundle.css"> 

note imported sass version of bootstrap in main.scss, means inside bundle have bootstrap css. reason include original non-sass version bootstrap summernote, depends on bootstrap.

edit 2: tried following:

.admin_page {   .my-textarea {     @extend .my-form-control;     height: 500px;   } } 

which has specificity of 0,0,2,0 (2 classes), doesnot work

also this:

.admin_page {    textarea.my-form-control {     height: 200px   } } 

which has specificity of 0,0,2,1 (2 classes + 1 element), works. why previous 1 not working?

it not problem of sass. problem of specificity.

you need mention high specificity css. since have class textarea, can this:

textarea.my-form-control{      height: 200px; } 

read this understand how specificity works in css.