Sass not being compiled to css


#1


https://www.codecademy.com/en/courses/learn-sass/projects/parallax-banner?user_id=551f228886f552b93200017c

I have been doing all the tasks for this project, but nothing has been changing in the browser. I tried to troubleshoot and it looks like the main.css file has not changed.

I know at the beginning of the Sass course, it said that everything would be automatically compiled into CSS, but I'm not sure if that still applies for this particular project.

Has anyone else had this problem?


html,

$parallax-height: 100vh;
$center-margin: 0px auto;

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #2e3738;
}


#landscape {
  height: $parallax-height;
}

#monkeys {
  height: $parallax-height;
}

#landscape,
#monkeys {
  
  width: 100%;
  height: 100vh;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateZ(-1px);
  

	h1{
		text-transform: uppercase;
	  	font-family: 'Bitter', serif;
	  	letter-spacing: 0.06em;
	  	font-size: 120px;
	  	color: #FFF;
	  	opacity: 0.7;
	  	text-align: center;
	}
}

p {
	width: 70%;
	padding: 5%;
	margin: $center-margin;
	text-align: center;
	font-size: 20px;
	font-weight: 200;
	line-height: 1.4;
}


#2

After removing your first line, your code complies to the below css.
If that line is there however, then the syntax isn't valid, which would explain why it wouldn't show up in the css file.

body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #2e3738; }

#landscape {
  height: 100vh; }

#monkeys {
  height: 100vh; }

#landscape,
#monkeys {
  width: 100%;
  height: 100vh;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateZ(-1px); }
  #landscape h1,
  #monkeys h1 {
    text-transform: uppercase;
    font-family: 'Bitter', serif;
    letter-spacing: 0.06em;
    font-size: 120px;
    color: #FFF;
    opacity: 0.7;
    text-align: center; }

p {
  width: 70%;
  padding: 5%;
  margin: 0px auto;
  text-align: center;
  font-size: 20px;
  font-weight: 200;
  line-height: 1.4; }

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.