终于有时间稍微探索一下网页设计，但现在我的 scss 代码无法编译。废话。
我首先注意到我的更改没有显示在实时预览中(括号)。然后我检查了相应的 .css 文件，在那里我可以看到我的更改不再被映射。废话。
我重新启动了一切(Brackets、Chrome、电脑)，但它仍然没有用。然后，我将我的 .scss 代码复制到剪贴板，删除了所有文件(在本例中为 home.scss、home.css 和 home.css.map)，并创建了一个新的 home.scss 文件。生成了映射器和 .css 文件，所以它仍然有效。然后我将我的代码复制到 .scss 文件中并保存，但再次没有任何映射。不知道这里出了什么问题。有人遇到过这个吗？昨天一切正常。
如果有帮助，代码如下:
主页.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>
首页.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 Fonts 添加 Oswald 字体后不久就出现了问题。
谢谢!
最佳答案
一切都很好，看起来在 _fontsAndColors 文件中声明这个是一个愚蠢的错误:$main_font: font-family: 'Oswald', sans-serif;
这导致了语法错误。字体系列:字体系列:...
谢谢 jseezo!
关于html - SCSS 不映射/编译，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42401121/