Issue in implementing CSS variables with Jekyll for publishing a website on GitHub Pages

I am facing an issue with GitHub pages, SASS, CSS, and Jekyll. I have defined some CSS variables for colors and files using the format 

--[variable name]: variable value
. Here is an example:

--logo_light: url("../img/logo-desktop.svg") no-repeat;
--crearGifo_light: url("../img/button-crear-gifo.svg") no-repeat;
--crearGifoHover_light: url("../img/CTA-crear-gifo-hover.svg") no-repeat;

When trying to use GitHub pages to publish the site, I encounter the following error: https://i.sstatic.net/YB6DK.png

 Your site is having problems building: Your SCSS file styles/styles.scss has an error on line 26: Invalid CSS after " --logo_light: ": expected "}", was "url("../img/log...". For more information, see https://docs.github.com/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#invalid-sass-or-scss.

I have reviewed the documentation but couldn't find a solution. I attempted to add {{ variable value }} as suggested in the docs, but it did not resolve the issue. Any assistance on this matter would be highly appreciated. Thank you!

REPO: https://github.com/nicolaszuleta95/Proyecto2_Acamica_GIFOS

csssassjekyllgithub-pages

Answer №1

In my opinion, the problem lies within the relative path specified in the sass file. You may want to consider replacing "../" with "/". By starting from the root and correctly defining the path, you might be able to resolve the issue.

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

What is the best way to transfer all li elements with a certain CSS style to a different ul?

I have a task to relocate all the <li style="display:none;"> elements that are currently nested under the <ul id="bob"> into another <ul id="cat">. During this relocation process, it is important that all the classes, ids, and CSS style ...

javascriptjqueryhtmlcsshtml-lists

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

javascripthtmlcssreactjs

Customizing WordPress: A Guide to Overwriting the Default Theme CSS

Looking to make changes to the default theme CSS and update it with the necessary styles. How can this be accomplished? Using !important doesn't have any effect. ...

csswordpressthemes

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

htmlcssvolusion

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

phphtmlcss

Creating a centered horizontal line in a table cell using CSS

element, imagine placing a line in the middle of a table cell (td) like this: To achieve this effect, you can insert a line within the td as shown in the image below: https://i.sstatic.net/Gn8tE.png This allows you to write text while keeping the line v ...

htmlcsshtml-table

Having trouble incorporating symbols with functionalities using HTML, CSS, and JS

I have implemented a table with three columns: "Action", "Question Subquestion/Text", and "Sort order". Additionally, I have incorporated a feature that allows for drag and drop functionality on the rows. Below is my code snippet: <!DOCTYPE html> &l ...

javascripthtmljquerycssjquery-ui

The button is not properly connected to the input

My dilemma involves attaching the clear button to the search input field, resulting in an unexpected outcome: https://i.sstatic.net/igkpx.jpg The issue seems to be linked to the "Black Dashboard PRO" theme that I am currently using. <form> < ...

htmlcssbootstrap-4

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

javascriptcssswitch-statement

Placing a larger container inside a smaller one and perfectly centering it

I am trying to find a solution to center a 1600px container within a 940px container on my webpage. The goal is to keep the page centered at all times, with the main content being 940px wide. When I add an image that is 1600px, it aligns left with the 940p ...

htmlcss

Positioning elements absolutely within a Material-UI Grid component

Is there a way to align a Material-UI icon with text so that the lowest point of the icon starts exactly at the baseline? We are using Material-UI Grid layout. The issue we are facing is that if we align the icon using 'baseline', it appears too ...

cssreactjsmaterial-ui

The alternating colors in the sorting table are not visible due to the divs being hidden with the display set

I've come across a problem that has me stumped. So, there are two sorting filters on a table and one of them hides rows that don't apply, messing up the alternating colors. Take a look at the function that sorts and the CSS below. The issue is pr ...

javascriptjqueryhtmlcss

Ways to update a specific div upon clicking an image

Is there a way to refresh a div using an image click? I have an image with the id 'sellhide' and another div with the id 'sellChart'. Below is the code: <div class="col-xs-12 col-lg-6 col-sm-6 col-md-6 index_table_three" id="sellCha ...

javascriptphpjquerycssajax

The functionality of the Bootstrap blog template is not aligning with its intended purpose

Currently, I am implementing a solution from the following link: http://www.bootply.com/86704 However, I am facing an issue where it is occupying the entire vertical space of my webpage. I would like to integrate this into my site, but positioned below ...

htmlcsstwitter-bootstrap

Dilemma in CSS: The debate between using padding shorthand or writing out the padding

Thanks for stopping by! Today, I ran into a peculiar CSS issue that I need help with. Take a look at the snippet below: /* padding: 0.5rem,2rem,0.5rem,2rem; this line is not working*/ /* while these do:*/ padding-top: 0.5rem; padding-bottom: 0.5rem; paddin ...

htmlcss

Adaptive Bootstrap 4 design concept

I am learning bootstrap and working on my website which requires a section similar to the one shown in this image. Can anyone guide me on how to achieve this? Below is the code I have written so far: <div class="row mfoo"> <div class="col-5 il ...

csslayoutbootstrap-4responsive

What is preventing these arrows from spinning?

I am struggling to find a solution to rotate the arrows on the x-axis, which are added by the::before pseudo-element when the link is active. Despite trying keyframes and searching online, I have not been able to achieve the desired result. Below you wil ...

htmlcsscss-animationspseudo-element

What is causing my link to be clickable beyond the designated linked text area?

https://i.sstatic.net/RZPaw.png Displayed above is the current image. By clicking anywhere inside the black border, you will be directed to the provided URL. However, I specifically want only the text "RANKINGS" to be clickable. Here is the HTML code: &l ...

htmlcsshyperlink

Having trouble embedding the video in an iframe. Any tips on how to make it work?

I have encountered an issue while trying to embed a video in my WordPress site using an iframe. The video is not displaying completely on the page, with only the left part visible and the rest being cut off. Here is the code I am currently using: <P A ...

htmlcssvideoiframeembed

Immersive full-page backdrop image

My HTML page has a background image set through CSS: html{ margin-top:10px; background: url(xxxxx.jpg) no-repeat center center fixed; background-size: cover; } I am trying to change the background image dynamically from the Javascript side. ...

javascripthtmlcss