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


#1

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?


Help me how to nest and applythe slogan inside the banner
#2

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.


#3

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


#4

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;
	}
}

#5

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;
}
}


#6

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


#7

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