Issues with Codekit and Zurb Foundation

Trying to run a compass and zurb foundation project. When I use compass watch to compile the project, it works perfectly fine. However, when attempting to compile using codekit, I encounter issues.

The initial error that pops up is:

Error in app.scss (Line 24 of _block-grid.scss: -0.625em*px isn't a valid CSS value.)

To address this, I traced back to the line in _block-grid.scss on Zurb's GitHub which referenced $block-grid-default-spacing. By uncommenting 

$block-grid-default-spacing: emCalc(20);
in my settings file, the issue was resolved, only to encounter the next error:

Error in app.scss (Line 111 of _type.scss: Incompatible units: 'px' and '.')

Despite having all installations properly set up and directing CodeKit to local versions of SASS and Compass, errors persist. Any suggestions on what steps I can take?

Interestingly, excluding the settings.scss file results in successful compilation without any errors.

cssrubysasscompass-sasszurb-foundation

Answer №1

To utilize compass plugins like Zurb in CodeKit, it's essential to switch to an external Compass compiler.

For those using RVM, start by running the system command on it. After that, proceed to install Compass and Zurb through the command line interface. Next, navigate to CodeKit's preferences and choose Compass in the Languages tab. Utilize the Advanced Compiler Settings section to configure the application to use your external compass compiler.

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

Tips for aligning 2 columns perfectly in a 3 column layout

I am facing an issue with a grid section where the grid-template-column is set for 3 columns, but sometimes the content loaded dynamically only fills 2 columns. I am attempting to center the columns when there are only 2. Despite going through the grid CS ...

cssgridmultiple-columns

Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders. .tg { border-collapse: collapse; border-spacing: 0; } .tg td { border-color: black; border-style: solid; border-width: 3px; font- ...

htmlcss

Tips on revealing div elements using a slide-down animation exclusively with JavaScript

I am looking to display a div with a slide-up effect using JavaScript (not jQuery) when clicked. Here is the HTML code I have: <div class="title-box"><a href="#">show text</a></div> <div class="box"><span class="activity- ...

javascripthtmlcss

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

JavaScript and CSS work together to create a seamless transition of background images (part two)

Thanks to the assistance of (Jan) in my previous inquiry, I successfully tackled the issue of automatic background modification. You can view my previous question here: Automatic background change with JavaScript and CSS However, after changing the backg ...

javascripthtmlcss

Bootstrap 4's hamburger icon in the navbar toggler displaying only two lines, rather than three

I have created a navbar using Bootstrap 4. Although the navbar is functional, I am facing an issue that I have not been able to resolve on my own. When collapsed, the hamburger icon only displays two lines instead of three. I suspect that the problem lie ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to import a css file from a static directory?

I am struggling to load a CSS file in the header of my Handlebars (HSB) template for home. My backend is built using Node.js with Express. I suspect that I may have set the path incorrectly, but I'm unable to pinpoint the exact issue. Could someone p ...

htmlcssnode.jsexpresshandlebars.js

Find the index of `target_item` within the `items` array and retrieve it

Can you please help me understand the following code snippet? I have been attempting to add 'puts' statements for debugging purposes, but unfortunately keep encountering errors. This code is part of an exercise or example that I should already be ...

rubyarrayswhile-loop

Can a clipped object in JavaScript be duplicated on the opposite side of the screen?

Exploring javascript, I have pondered the idea of having an object clip off a screen and seamlessly appear on the other side as if the page was endless. To illustrate my concept more clearly, I have provided an image link below: https://i.sstatic.net/DCpZ ...

javascriptjqueryhtmlcssthree.js

Employing CSS for page breaks, while contained within a DIV that is absolutely positioned

I have integrated the ASP.NET AJAX ModalPopupExtender into a webpage. The popup displays details of customer orders that need to be printed, with each order ideally on a separate page. Unfortunately, the CSS page-break-after style doesn't seem to wor ...

asp.nethtmlcssasp.net-ajaxmodalpopupextender

Problem with li:before not displaying correctly in IE8

I've encountered an issue with a list menu on one of our recently developed websites. The problem lies in using li:before to display a | before each item in the menu. Here is the CSS code I am using: #menu li:first-child:before { content:""; ...

htmlcsshtml-listspseudo-element

establishing a predetermined dimension using css and integrating it into javascript

I'm a beginner in CSS and JavaScript and I've been searching through various sources for an answer to my question without any luck. My goal is to pre-set the sizes of all sections using CSS and then utilize these sections in JavaScript. However, ...

javascriptcsssize

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. https://i.sstatic.net/Qk5BR.png The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ...

javascripthtmlcssbootstrap-4

The MVC5 Web Application is experiencing visual issues when being accessed on the intranet post deployment

After deploying an MVC5 Web Application on a server running IIS7, the site appears correctly when accessed from the server's IE10 browser. However, viewing it from another machine's IE10 on the same network results in the site becoming distorted, ...

cssc#-4.0iis-7asp.net-mvc-5

The bootstrap carousel is unable to load at the moment

I've been attempting to create a carousel using Bootstrap, but it's not displaying correctly in Firefox or Google Chrome on Windows 8. Here's the code I used, could someone please help me identify what I might have done incorrectly? <htm ...

javascriptjqueryhtmlcsstwitter-bootstrap

Conceal or eliminate step titles within the angular-archwizard step

Currently, I am working with angular-archwizard and facing an issue. In the image attached (PFA: image), I do not want the stepTitles to be highlighted or displayed at all. I have attempted to pass a blank string in the "stepTitle" field but unfortunately, ...

cssangular

Why does jQuery only load once the loading process has been completed?

I want to enhance user experience by adding a blue rectangle with a :focus class when a product is clicked on before the next page loads. To achieve this, I implemented jQuery functionality that changes the class of the clicked product and adds a new clas ...

javascriptjqueryhtmlcss

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

htmlcss

How to create a stunning pixel pattern overlay on a website section

I've been exploring how to add a pixel pattern overlay onto a website section similar to what's done on this site: (over the background video image at the top and the image in the bottom section). I'm sure it's a simple process, I jus ...

csswordpress

Attempting to showcase the text within an <a> element on a <canvas> element while ensuring there are no noticeable visual distinctions

Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...

javascriptcsshtmlcanvas