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

Having trouble with installing an npm package into your system?

I attempted multiple methods to install this package: npm install cloud-print npm install https://github.com/postmen/node-cloud-print.git and so forth... However, each time I encountered the following output: `npm WARN addRemoteGit Error: Command fai ...

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

Switching between div elements in ReactJS

I am currently working on a web application built with ReactJS. One feature that I would like to include is similar to the following: My query is as follows: What is this specific effect called? How can I go about implementing it? I am not looking for ...

Ways to position an element at the center using Flexbox技

Having some difficulty centering an element in my code using flexbox. It seems to work for everything else, but not here. Any suggestions or ideas? .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; ...

Ways to adjust the dimensions of an SVG icon in a React application

Trying to figure out how to display an SVG icon and text on the same line in React and Next.js. After some research, I've managed to achieve it. However, I'm struggling to control the size of the SVG icon in relation to the text. Ideally, I want ...

Tips for personalizing the streamlit expander widget

After diving into the streamlit components documentation, it became clear that rendering HTML code for the label parameter of the st.expander() function is not supported. Is there a way to work around this limitation? My exact requirement is as follows: ...

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

I am currently working on a container that can be expanded and collapsed simply by clicking on a chevron icon. The functionality to collapse or expand the container resides within a function called transformAnimation. This function code closely resembles t ...

Modifying the color of the active column

In an attempt to remove the color from the column border following a click on the image, I am struggling to locate the specific code segment that needs adjustment. I have scrolled through the entire code and experimented with color changes without succes ...

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

How can we display a different navbar based on whether the user is logged in or not?

Can anyone share the most effective methods for displaying a different navbar based on whether or not a user is logged in? I have considered a few approaches: One option might involve creating two separate navbars in the HTML file and using CSS to tog ...

Experience the heat of hot reloading with webpack-dev-server as you make changes to your sass files

My webpack build is set up with webpack-dev-server. It's functioning properly, as it auto-refreshes in the browser when I change a .js file. However, when I modify a .sass file, nothing happens. Below is my webpack configuration: const { resolve } = ...

The ES Module's require() function is not supported. Please update to dynamic import() instead, which is compatible with all CommonJS modules

I'm encountering some difficulties with launching my Angular application. After running ng serve, I am seeing the following error message: An unhandled exception occurred: require() of ES Module C:\Users\******\Documents\GitHub&bso ...

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

What is the best way to recreate this grid-like design using CSS?

By utilizing clever techniques such as margins and outlines, I was able to design the following. If you'd like to take a look at the live website, it can be found at The CSS code that I used is as follows: body { margin: auto; max-width: 736px } s ...

Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink? Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve. I thought about using tooltips in Bootstrap, but I'm not sure if it ...

Unable to run npm installation for the project

I'm facing an issue with my project when trying to run npm i. Below is the content of my package.json file: { "name": "gogo-react", "version": "4.2.3", "description": "Gogo - React Bootstra ...

Looking to duplicate the elements with the click of a button?

I am in need of assistance with my registration form. My goal is to move the elements contained within the <fieldset> tags to the end of a row when the user clicks the + button. The result you see initially has been recreated. Thank you for your s ...

How to align an unordered list vertically in the center using Bootstrap?

Trying to figure out why the ul within this parent div is not centered vertically. Here is a screenshot of the issue: https://i.sstatic.net/ZOc9M.png <div className=" d-flex align-items-center bg-primary "> <ul ...

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...