I got this message: Error: Invalid CSS after "{": expected 1 selector or at-rule

i got this message: Error: Invalid CSS after “{”: expected 1 selector or at-rule, was “{@import url(https:” on line 1 of main.scss >> {@import url(https://fonts.googleapis.com/css?family=Pacifico); ^ after nesting the class. any help?

If you find you’re getting errors, it’ll be easier for other people to help you if you post all of your code.

However, I’ve noticed that the line:

{@import url(https://fonts.googleapis.com/css?family=Pacifico);

Shouldn’t begin with an opening brace.

1 Like

I have the same problem, any idea about it how to resolve?

Hi,

I had the same error. I changed my code, use only the variable, however now I have a different error message:

“Did you add a border of 4px solid inside a variable to .slogan, and to .banner top and bottom borders?”
I am not sure what am I doing wrong. Any idea?

Here is my code:

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
$translucent-white: rgba(255,255,255,0.3);
$icon-square-length: 300px;
$standard-border: 4px solid black;

h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
  border : {
    top: $standard-border;
    bottom: $standard-border;
	}
  
  .slogan {
  	position: absolute;
  	border: $standard-border;
  	top: 200px;
  	left: 25%;
  	width: 50%;
  	height: 200px;
    background-color: $translucent-white;
    
    span {
  		position: absolute;
  		text-align: center;
  		line-height: 200px;
		}
	}
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
  
  .icon {
  	display: inline-block;
  	margin: 2%;
  	border: $standard-border;
  	font-size: 32px;
    width: $icon-square-length;
		height: $icon-square-length;
	}
}

This core works, you can look about diffrents

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
$translucent-white: rgba(255,255,255,0.3);
h1 {
font-family: Roboto, sans-serif;
text-align: center;
}

.banner {
font-family: ‘Pacifico’, cursive;
height: 400px;
background-image: url(“lemonade.jpg”);
border : {
top: 4px solid black;
bottom: 4px solid black;
}

.slogan {
background-color: $translucent-white;
position: absolute;
border: 4px solid black;
top: 200px;
left: 25%;
width: 50%;
height: 200px;

span {
	position: absolute;
	text-align: center;
	line-height: 200px;
	}
}

}

.container {
text-align: center;
font-family: ‘Pacifico’, cursive;

.icon {
display: inline-block;
margin: 2%;
border: 4px solid black;
font-size: 32px;
}
}

A post was split to a new topic: Error: Invalid CSS after “}”: expected “}”, was “” on line 41 of main.scss >> } ^

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