The system encountered an issue with the CSS code, indicating "Invalid CSS after \"...inear-gradient(\": expected selector, was "{"

While attempting to compile my sass code, I encountered the following error message regarding a syntax issue:

/* {
   "status": 1,
   "file": "C:/Users/faido/Desktop/Productivity/sass 
   css/project/sass/main.sass",
   "line": 36,
   "column": 9,
   "message": "Invalid CSS after \"...inear-gradient(\": expected selector, 
   was \"{\"",
   "formatted": "Error: Invalid CSS after \"...inear-gradient(\": expected 
   selector, was \"{\"\n        on line 36 of sass/main.sass\n>>         
   linear-gradient( {\n\n   --------^\n"
   }
*/

The specific code that triggered this error is as follows:

.header 
    background-image: linear-gradient( 
        to right bottom, 
        rgba( $color-primary-light, 0.8 ), 
        rgba( $color-primary-dark, 0.8 )
    ),
    url(../img/hero.jpg)

If anyone can offer any guidance or assistance with resolving this issue, it would be greatly appreciated.

Answer №1

Unfortunately, Sass's indented syntax lacks support for multiline expressions as mentioned in this GitHub issue.

To work around this limitation, you will need to consolidate everything onto a single line:

.header 
    background-image:  linear-gradient(to right bottom, rgba($color-primary-light, 0.8), rgba($color-primary-dark, 0.8)) url(../img/hero.jpg)

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

Picture in the form of a radio button

Is there a way to use an image instead of a radio button in my AngularJS form? I have managed to hide the radio button using CSS, but it disables the checked event. How can I make the image clickable? position: absolute; left: -9999px; Here is the code s ...

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

The site is visually appealing in Firefox, but has a few issues on Chrome

I've encountered a common issue where my website displays perfectly in Firefox but looks terrible in Dreamweaver and Chrome. To fix it, I made live CSS edits in Firefox then copied them to Dreamweaver resulting in a mess. Here's how it should lo ...

Designing Interactive Circular Dates on Website

Currently, I am working on a webpage using HTML, CSS, JavaScript, and PHP. The goal is to design a page that features 7 circles representing the current date and the next 6 days. Users should be able to click an arrow to navigate to the following 7 days. ...

Tips on solving the Navigation bar burger problem with HTML and CSS

## I am having trouble making my navigation bar responsive using HTML and CSS as the navigation burger does not appear in mobile view ## To take a look at my code on jsfiddle, click here: [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/ ...

Having trouble with creating a new Next.js app using the latest version with npx?

Having some difficulty with the "npx create-next-app@latest" command while setting up Next.js. As a newcomer to both the community and Next.js, I could use some assistance in resolving this problem. Upon running the command, an unfamiliar message was displ ...

Generating a new root in React 18 results in numerous rounds of rendering and execution

Every time I attempt to run this code in React 18, it seems to render multiple times unlike React 17 where it only executes once and functions properly. How can I modify the code so that it only runs once? Is there a specific reason for the multiple execu ...

Tricky problem with z-index - how to position a CSS3 triangle under the menu

Hey there, thank you for taking the time to look into my issue. I'm currently working on a menu design that I would like to resemble this example: The key feature here is creating triangular shapes on either side and positioning them beneath the men ...

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

How can I adjust the appearance of an HTML tag within an Angular component?

I have created an Angular component with the following definition: import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'rdc-dynamic-icon-button', templateUrl: './dynamic-icon-button. ...

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that thi ...

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

Revamping Slideshows: Bringing CSS Animation to JavaScript

/* JavaScript */ var slides=0; var array=new Array('background.jpg','banner.jpg','image.jpg'); var length=array.length-1; $(document).ready( function(){ setInterval(function(){ slides++; ...

What is the best way to showcase a JSON object in an attractive format on a webpage?

Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...

Reveal/Conceal footer upon vertical scrolling

I am attempting to achieve the following goals: Display the div element when the scrolling position is greater than 20 Apply a fadeOut effect after a certain delay Prevent the fadeOut effect when hovering over the sticky footer This is my implementation ...

Best Practices for Customizing Angular 5 node_module .js Files

After searching through Google and Stackoverflow, I realize that my query may be common. It seems like I might not be using the correct search terms. In my current Angular 5 Project, I have integrated pdfmake by executing the command npm i --save pdfmake. ...

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

Stylish Sudoku Grid Design with CSS-Grid Borders

I have designed a sudoku puzzle and I am seeking assistance with CSS to style it. My goal for styling using CSS is illustrated here... https://i.stack.imgur.com/nrA47.png What I currently have appears like this... https://i.stack.imgur.com/zpNp6.png T ...

Nuxt encountered a fatal error due to a TypeError, stating that it cannot destructure the property 'nuxt' of 'this' because it is undefined. This error occurred while using Nuxt Js

Whenever I attempt to run npm run dev in my nuxt project, an error message pops up: Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 21:02:57 FATAL Cannot de ...