Issue encountered: The CSS provided is not valid as it is expecting a selector or at-rule after "body", but instead found "{". This error is located on line 4 of the code

As I was working on my code in style.scss, I encountered an error message from my Sass compiler (Koala) while trying to include the following code: body {margin-top:105px;} Here's the specific error snippet from style.scss:

Error: Invalid CSS after "body ": expected selector or at-rule, was "{" on line 4 of C:\Users\Petar\Desktop\Mizuxe novo\scss\style.scss

Being a beginner in this field, I would appreciate any guidance if more information is required.

https://codepen.io/petar-scepanovic/pen/Papmxj

/*
Error: Invalid CSS after "body ": expected selector or at-rule, was "{"
        on line 4 of C:\Users\Petar\Desktop\Mizuxe novo\scss\style.scss

1: $primary: #3292a6;
2: $primary-overlay:rgba(50,146,166, 0.8)
3: 
4: body {
5:   margin-top:105px;
6: }
7: 
8: 
9: .navbar {

Backtrace:
C:\Users\Petar\Desktop\Mizuxe novo\scss\style.scss:4
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/scss/parser.rb:1278:in `expected'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/scss/parser.rb:1208:in `expected'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/scss/parser.rb:42:in `parse'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/engine.rb:414:in `_to_tree'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/engine.rb:290:in `render'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/exec/sass_scss.rb:400:in `run'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/exec/sass_scss.rb:63:in `process_result'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/exec/base.rb:52:in `parse'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/lib/sass/exec/base.rb:19:in `parse!'
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.5.2/bin/sass:13:in `<top (required)>'
C:/Program Files (x86)/Koala/bin/sass:22:in `load'
C:/Program Files (x86)/Koala/bin/sass:22:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Error: Invalid CSS after \"body \": expected selector or at-rule, was \"{\"\A         on line 4 of C:\Users\Petar\Desktop\Mizuxe novo\scss\style.scss\A \A 1: $primary: #3292a6;\A 2: $primary-overlay:rgba(50,146,166, 0.8)\A 3: \A 4: body {\A 5:   margin-top:105px;\A 6: }\A 7: \A 8: \A 9: .navbar {"; }

Answer №1

Oops, you forgot to add a semicolon on the 2nd line of your CSS code.

Here's what you need to do:

$primary-overlay:rgba(50,146,166, 0.8)

Change it to:

$primary-overlay:rgba(50,146,166, 0.8);

Once you make that change, everything should be good to go!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I create a Bootstrap 4 navigation menu that toggles on the left side but keeps the button on the right

Is it possible to create a collapsible bootstrap 4 navigation with the toggle button on the left side while also having action buttons on the right side that are not part of the collapsible menu? How can I prevent the navbar-collapse menu from pushing down ...

Issue with mobile responsiveness - Adjust Bootstrap classes or review media query placement

My media query seems to be getting out of control as I attempt to create a timeline with bullets. I find myself adding too many queries in an effort to align the bullets properly along the timeline. https://i.sstatic.net/Apav5.png I strongly believe that ...

conceal a component within a different container

Is there a way to hide or show an element within a container based on the hover state of another container? Here is an example of what I have tried so far: HTML5 <div class="left-menu-container"> <div class="left-menu-inner-container"> ...

Facing an infinite loop issue with my ng-view and the index.html page in AngularJS

Hello everyone, I have a question regarding AngularJS ngview. I just started learning about Angular a week ago. In my code, the webpage is showing an infinite loop of the index itself instead of displaying the correct page. I've searched on Stack Ove ...

Header Text unexpectedly breaking out of Div in Mozilla Firefox, but not in Chrome or IE

Need some help with getting the h5 text to show up inside the div with id="text". Any advice would be appreciated! Thanks for taking the time to read this! <div id="footer"> <div id="instagram"> <div id="text"> &l ...

Adjusting the tab order dynamically within a navigation menu

I am currently facing an issue where the focus is not being ignored when the drawer is closed. Even with the showDrawer reference set to false, I can still tab through links in the closed drawer. Setting tabindex="-1" on the <nav> element does not pr ...

A guide to personalizing the woocommerce 'best-selling items' widget

WooCommerce widgets are great, but I'm struggling to customize the styling. Can anyone lend a hand? ...

Find a solution for displaying custom product badges

Having some issues with a custom product badge on my website. I tried adding a new badge (besides "Sale"), but it seems to be displaying in the wrong position. The badge should display as "Choice" on the featured products, so I added this code to the chil ...

I am facing issues with my Bootstrap and CSS conflicting with each other in React JS

My styles are mysteriously changing when I add the bootstrap link between the <head></head> tags. Here is the header without the bootstrap link: https://i.sstatic.net/ly2nf.png And here is the header with the bootstrap link: https://i.sstatic ...

What is the best way to incorporate hyperlinks or text color modifications to a variable string in JavaScript?

I have a website that features a random on-load slideshow with text displayed in div containers for each slide. I am looking to enhance the functionality by adding links or changing the color of specific words within the text. You can view my current progr ...

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

Placing a div over a JavaScript element

Is it feasible to overlay a div(1) with a background image on top of another div(2) that contains JavaScript (like Google maps API v3)? I have experimented with z-index without success, and I am unable to utilize absolute positioning because I depend on t ...

Is it possible to create a webpage that is invisible to users accessing it from a desktop device

Is it possible to create a webpage that is only visible on tablet and mobile devices, while redirecting desktop users somewhere else? I want this page to be hidden from desktop users entirely. ...

Creating a stunning image reveal animation using GSAP and clip-path within a React environment

When attempting to create an animation for revealing an image using GSAP and the clip-path property within a Component, I encountered an issue. The animation works perfectly when using the first clip-path value, but as soon as I switch to the other one, th ...

Interactive radio button selection with dynamic image swapping feature

I'm currently working on creating a radio list with three options: Salad Spaghetti Ice cream This is how I coded it: <div id="radiobuttons"> <label><input name="vf" type="radio" value="0" checked/>Salad</label> < ...

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

Exploring the wild: adjusting heights of flex items in Safari

I am facing an issue with my flex container and images. When using flexwrap and setting the flex-item width to 33%, the images look perfect in Chrome as they maintain their aspect ratios. However, in Safari, the images get stretched vertically, which is no ...

Removing Borders from HTML Tables

I am struggling to eliminate the border of a table within a gridview. The table is located inside the itemtemplate, and I can't figure out how to remove the border. Can someone please assist me with this? Thank you. Shown below is the code I am worki ...

Implementing Bootstrap 3.1 to prioritize main content at the top on mobile devices

Below is the grid structure that I am working with <div class="row"> <div id="A" class="col-md-3"> <div class="alert alert-info">A</div> </div> <div id="B" class="col-md-6"> <div class=" ...

Receiving JSON information from a web address using Javascript

I'm currently faced with a challenge in extracting JSON data from a web server. Despite the absence of errors in my code, I encounter difficulties displaying any output. Below is a snippet of the issue: <!DOCTYPE HTML> <html> <head ...