Question

终于有点时间去探索网页设计，但是现在我的scss代码无法编译。垃圾。

我首先注意到我的更改未在实时预览（Brackets）中显示。然后我检查了相应的.css文件，在那里我可以看到我的更改不再被映射了。废话。

我重新启动了所有内容（Brackets，Chrome，计算机），但它仍然无效。然后我将.scss代码复制到剪贴板，删除所有文件（在本例中为home.scss，home.css和home.css.map），并创建了一个新的home.scss文件。生成了映射器和.css文件，因此仍然有效。然后我将我的代码复制到.scss文件并保存，但没有再映射任何内容。不知道这里有什么不对。有没有人遇到过这个？昨天一切都很好。

如果有帮助，请输入以下代码：

home.html的

<!doctype html>
<html>

<head>

    <meta charset="UTF-8">
    <title>Home</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,700" rel="stylesheet">
    <link rel=stylesheet type="text/css" href="../css/home.css">

</head>

<body>

    <div class="first">
        <img src="../images/HN_LogoWhite.svg" />
    </div>
    <div class="second">
        <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatibus sed iusto quaerat nesciunt eius incidunt saepe quam, unde quisquam nobis maiores similique at illo soluta, iure ipsum! Minima, possimus?</section>
        <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, placeat ducimus quisquam, ullam quae temporibus esse fugiat nostrum quaerat eos facilis, excepturi labore laboriosam molestiae. Error libero ea saepe officiis.</section>
    </div>

</body>

</html>

home.scss

@import 'fontsAndColors';

/* Setting frame */

* {
    box-sizing: border-box;
}

html {
    font-family: $main_font;
}

body {
    background-color: $hn_white;
    margin: 0;
}

.first {
    background-image: url('../images/TopUnderwater.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;

    display: block;
    margin: auto;
    width: 100vw;
    height: 100vh;
    img {
        width: 20%;
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}



.second {
    height: 100vh;
    text-align: center;
    background-color: $hn_green;
    padding: 5%;
    section {
        top: 10%;
        width: 30%;
        margin: 10%;
        padding: 10%;
        float: left;
        display: block;
        border: solid 1em $hn_green;
        position: relative;

        overflow:hidden;
    }
}

_fontsAndColors.scss

$hn_green: #6ca66b;
$hn_blue: #3398cc;
$hn_white: #ffffff;
$main_font: font-family: 'Oswald', sans-serif;

@mixin hn_bg_gr1($col1, $col2) {
    background: $col1;
    background: -webkit-linear-gradient(left top, $col1, $col2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, $col1, $col2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, $col1, $col2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, $col1, $col2); /* Standard syntax (must be last) */
}

@mixin hn_bg_gr2($col1, $col2) {
    background: $col1; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient($col1, $col2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient($col1, $col2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient($col1, $col2); /* For Firefox 3.6 to 15 */
    background: linear-gradient($col1, $col2); /* Standard syntax */

}

，奇怪的是，home.css.map

{
  "version": 3,
  "file": "home.css",
  "sources": [
    "home.scss",
    "_fontsAndColors.scss"
  ],
  "mappings": "",
  "names": []
}

可能与此无关，但在我从Google字体添加Oswald字体后不久就出现了问题。

谢谢！

Answer 1

一切都好，看起来像是一个愚蠢的错误，在_fontsAndColors文件中说明：$ main_font：font-family：＆＃39; Oswald＆＃39;，sans-serif;

导致语法错误。 font-family：font-family：...

谢谢jseezo！

SCSS没有映射/编译

1 个答案: