Question

我正在尝试使用SASS在我的离子页面上创建一个带有flexbox的表，由于某种原因，我在.scss文件上编写的代码不适用于page.html。有什么想法吗？

页面html：

<head>

          <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
          <script src="jquery-3.2.1.min.js"></script>


</head>
<body>
   <h2>Row oriented table</h2>
      <div class="Rtable Rtable--4cols">

        <div class="Rtable-cell"><h3>Eddard Stark</h3></div>
        <div class="Rtable-cell">Has a sword named Ice</div>
        <div class="Rtable-cell">No direwolf</div>
        <div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

        <div class="Rtable-cell"><h3>Jon Snow</h3></div>
        <div class="Rtable-cell">Has a sword named Longclaw</div>
        <div class="Rtable-cell">Direwolf: Ghost</div>
        <div class="Rtable-cell"><strong>Knows nothing</strong></div>

        <div class="Rtable-cell"><h3>Arya Stark</h3></div>
        <div class="Rtable-cell">Has a sword named Needle</div>
        <div class="Rtable-cell">Direwolf: Nymeria</div>
        <div class="Rtable-cell"><strong>No one</strong></div>

      </div>
</body

PAGE.SCSS：

             page-ficha-atual {
            $bw: 3px;  // border width

            .Rtable {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0 3em 0;
            padding: 0;
            }
            .Rtable-cell {
            box-sizing: border-box;
            flex-grow: 1;
            width: 100%;  // Default to full width
            padding: 0.8em 1.2em;
            overflow: hidden; // Or flex might break
            list-style: none;
            border: solid $bw white;
            background: fade(slategrey,20%);
            > h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
            }


            .Rtable--2cols > .Rtable-cell  { width: 50%; }
            .Rtable--3cols > .Rtable-cell  { width: 33.33%; }
            .Rtable--4cols > .Rtable-cell  { width: 25%; }
            .Rtable--5cols > .Rtable-cell  { width: 20%; }
            .Rtable--6cols > .Rtable-cell  { width: 16.6%; }



            html { 
            height: 100%;
            background-color: #EEE; 
            }
            body {
            box-sizing: border-box;
            min-height: 100%;
            margin: 0 auto;
            padding: 2em;
            max-width: 800px;
            font-family: 'Josefin Sans', sans-serif;
            font-size: 1.2em;
            background-color: white;
            border: double 3px #DDD;
            border-top: none; border-bottom: none;
            }
            h1, h2, h3, h4, h5, h6 { margin-top: 0; }
            h3 { font-size: 1.2em; }
            h4 { font-size: 1em; }
            strong { color: darken(slategrey,20%); }

                 }

输出只是div class="Rtable-cell"中的文本。任何想法为什么会这样？它是否与我在页面中使用的bootstrap冲突？

更新：问题似乎是我需要页面选择器{}内的scss代码。但之后没有改变。编辑：sass正在工作，只是为了确保我在theme / variables / scss中创建了一个sass变量。并在我的page.scss中调用它，它工作

Answer 1

您无法在HTML页面中找到SCSS文件的链接。你必须将其编译为CSS First。另一件事，检查代码提供的错误是</head>和</body>

的关闭

我建议阅读整个文档： http://sass-lang.com/documentation/file.SASS_REFERENCE.html

继续摇摆！

Answer 2

您没有正确关闭头标。它需要看起来像这样：

<head>

      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="jquery-3.2.1.min.js"></script>


</head>

page.scss不适用于我的离页上的page.html

2 个答案: