Compass encountered an error stating 'Invalid CSS after "expression" was "expression".' Can you believe it?

While working on my project, I encountered an issue with compiling scss files into css using compass. The error message I received is as follows:

Error in sass-test/sass/nr-metronic.scss (Line 4 of sass-test/sass/metronic/global/_colors.scss: Invalid CSS after " white": expected ")", was ": (base:#ffffff...")

This is the content of my _colors.scss file:

//Component colors

$component-colors: (
white:(base:#ffffff, font: #666),
default:(base:#e1e5ec, font: #666),
dark:(base:#2f353b, font: #FFFFFF),
blue:(base:#3598dc, font: #FFFFFF),
blue-madison:(base:#578ebe, font: #FFFFFF),
blue-chambray:(base:#2C3E50, font: #FFFFFF),
blue-ebonyclay:(base:#22313F, font: #FFFFFF),
blue-hoki:(base:#67809F, font: #FFFFFF),
blue-steel:(base:#4B77BE, font: #FFFFFF),
blue-soft:(base:#4c87b9, font: #FFFFFF)
);

I have also imported "_colors.scss" in a separate file like this

@import "colors";

Despite reviewing my code multiple times, I am still unable to pinpoint the cause of this error.

csssass

Answer №1

After running some tests on my local setup, it became evident that version 0.12.7 is not functioning properly.

To address this issue, I suggest upgrading to the latest version of Compass 1.0.3 (Polaris); this should resolve the problem.

It's worth considering whether compass is truly necessary. Keep in mind that Compass compiles Sass through Ruby, which is significantly slower compared to modern Sass compilers like libe-sass, written in C for faster performance

.

If you require compass helpers, there are plenty of alternative solutions available now.

I recommend exploring tools such as Gulp and its various plugins for your workflow improvement.

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 reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

htmlcsssvg

Is your max-height transition not functioning properly?

Is there a way to create a collapsible panel using only CSS similar to the Bootstrap bootstrap collapse panel? Why isn't the max-height transition working for me? How can I toggle the panel if it's checked, and have the panel collapse when d ...

csstransition

How can CSS be used to create a responsive form script?

We have enlisted the services of an SEO provider through upcity.com, which necessitates us to embed a form on our website. However, we are facing challenges with the responsiveness of the form on mobile devices, which undermines our efforts. Therefore, I a ...

htmlcssresponsive-design

My div is currently being concealed by a jQuery script that is hiding all of its

Below is the current code snippet: jQuery(document).ready(function($) { $("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() { $("#available-widgets-list div:not([id*='layers-widget']) ...

javascriptjqueryhtmlcss

Unable to load CSS in Django

Having recently started using Django, I encountered an issue with loading CSS files. This is the directory structure in my Windows system: Scenario 1: . |__myproject |__+myproject |__+myapp |__-static | |__-css | ...

cssdjango

What is the method for inserting indicators between yAxis values in a yAxis ChartJs graph?

I have a line chart displaying the link below: https://i.sstatic.net/yUAHf.png There is a noticeable gap between 0-0.7 on the chart. I am looking to add an indicator similar to the one shown in this image: https://i.sstatic.net/pRjsY.png The desired ou ...

javascripthtmlcsschart.js

CSS: Apply styles to an element when hovered over or when focused on, but not simultaneously

I am currently utilizing typeahead.js to generate a basic dropdown list. The functionality I am aiming for is the ability for users to navigate through suggestions using the keyboard's down key and select a suggestion with the mouse. In both scenario ...

javascriptjqueryhtmlcssruby-on-rails

What is the best way to synchronize the image dimensions and source when dynamically loading images?

I am facing an issue with a function that updates images by altering the src and css (width/height) of an IMG tag within the document. Below is a simplified example to demonstrate the problem: updateImage = function(src, width, height) { $("#changeMe"). ...

javascriptjquerycssimage

What is the best way to horizontally scroll to a selected item within a scrollable div using React?

I'm working on a project that involves creating a horizontal scrollable list. The goal is to have the list automatically scroll to the selected item, centering it in the view. While attempting to implement this feature using React, I've encounte ...

javascriptcssreactjs

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

What is the most efficient way to fill an input field using jQuery with only two inputs?

I am working with a set of five input elements, all sharing a class called "cheque". Is there a way to selectively fill only one of these inputs using jQuery? Unfortunately, I am unable to utilize the validator jQuery library for this task. The following ...

jqueryhtmlcss

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: https://i.sstatic.net/2IMc4.png To target the checkbox, I added a class called .accept and defi ...

csscheckboxsapui5

Eliminate any excessive space located at the bottom of the table

How can we adjust the spacing at the bottom of the table to remove extra space? Currently, it looks like this: https://i.stack.imgur.com/DwkbG.png We want it to look like this: https://i.stack.imgur.com/extDP.png CSS .wk_mp_body td { background: ...

htmlcsshtml-table

Mysterious purple squares mysteriously popping up around elements in a WordPress website utilizing CSS Bootstrap 4

While browsing certain websites on specific browsers that utilize Bootstrap 4 as a framework within a WordPress site, I've noticed some elements displaying strange purple squares when visited. Any ideas on the cause of this issue and how it can be res ...

htmlcsswordpressbootstrap-4web-frontend

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

I need a row of equally sized SVGs with some text below them, like a navigation bar but larger. I almost have it working, but there are some issues with my current setup. To clarify, this is what I am aiming for: The SVGs should be responsive and scale a ...

htmlcsssvgnavbarscaling

Delete a portion of the text on the button

Is there a way in HTML/JS/JQuery or CSS to search for a specific button in the document and remove/hide only the text of the button without affecting the icon? @Html.ActionLink("Edit", "Edit", new { id = -1 }, new { @class = "btn-edit" }) | ...

javascriptjqueryhtmlcssasp.net-mvc-4

Displaying/Concealing specific choices using jQuery

Greetings! I am in need of some assistance with my coding query. I have been working on a piece of code where selecting 'x' should reveal another dropdown, which seems to be functioning correctly. However, if I navigate three dropdowns deep and t ...

javascriptjqueryhtmlcss

Mastering the Art of Positioning Arrows in Post Car

I am currently facing an issue with my post carousel. The carousel has two arrows on the side, and I have designed a background in the shape of circles for these arrows. However, I can't seem to figure out how to center the arrows inside the circles. ...

csswordpressowl-carousel

What is the reason .navbar-dark is not functioning in Bootstrap v5.2?

I am puzzled by the fact that navbar-dark is not changing the text color in the nav. I'm not sure why this is happening. Any insights would be greatly appreciated! <!doctype html> <html lang="en"> <head> <meta charset=" ...

htmlcssbootstrap-5