Question

我有一个这样的管理页面：

<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>

这是我的main.scss文件：

.my-form-group {
  @extend .form-group;

  .my-form-control {
    @extend .form-control
  }
}

@import "./admin.scss";

这是我的admin.scss：

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

未设置文本区域的高度。

我试过<textarea class="my-form-control" style="height:200px">{{user}}</textarea>并且它有效。

为什么sass版本不起作用？

编辑：

这是我的标题：

    <!--underscore-->
    <script src="/node_modules/underscore/underscore-min.js"></script>

    <!--jquery-->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>

    <!--bootstrap (keep the css although duplicate in bundle, since some 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">

请注意，我在main.scss中导入了sass版本的bootstrap，这意味着在bundle中我有bootstrap css。我包含原始非sass版本引导程序的原因是summernote，它取决于bootstrap。

编辑2：我尝试了以下方法：

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

具有0,0,2,0（2类）的特异性，它不起作用

还有：

.admin_page {

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

具有0,0,2,1（2个等级+ 1个元素）的特异性，它有效。为什么前一个不起作用？

Answer 1

这不是sass的问题。这显然是特异性问题。

你只需要提到高特异性css。由于你有一个textarea类，你可以这样做：

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

阅读this以了解css中特异性的工作原理。

Sass bootstrap无法设置textarea

1 个答案: