After finally finding some time to delve into web design, I encountered a frustrating issue with my SCSS code failing to compile. Ugh.
The first red flag was when my changes weren't appearing in the live preview on Brackets. Upon inspecting the corresponding .css file, it became apparent that my alterations were no longer being reflected. Double ugh.
I attempted to troubleshoot by restarting everything - Brackets, Chrome, even my whole computer - but to no avail. In a last-ditch effort, I copied my .scss code to the clipboard, deleted all related files (home.scss, home.css, and home.css.map), and started anew by creating a fresh home.scss file. The mapper and .css files were successfully generated, indicating they were still functional. However, pasting my code back in yielded no results once again. I'm stumped. Has anyone else run into this issue before? Just yesterday, everything was working perfectly fine.
If it helps, here's the code snippet:
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 */
}
Additionally, there's an unusual presence of home.css.map
{
"version": 3,
"file": "home.css",
"sources": [
"home.scss",
"_fontsAndColors.scss"
],
"mappings": "",
"names": []
}
This may be unrelated, but things started going awry shortly after incorporating the Oswald font from Google Fonts.
Any insights would be greatly appreciated!