The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here.

Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous duplicate directives in the generated CSS file.

Although I believe this is likely due to my own error, I am unsure of where to begin troubleshooting and what information to provide to pinpoint the problem.

Current versions in use: Foundation 5.4.7 (though it's listed as 5.4.5) and Compass 1.0.1.

Any help would be greatly appreciated.

*************** Update: *****************
After further inspection, I confirmed that I was indeed running version 5.4.7 as suggested by @Cartucho.

I looked into _functions.scss and found the following patch:

// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for components that rely on other components. 
$modules: () !default;
@mixin exports($name) {
  $module_index: index($modules, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $modules: append($modules, $name);
    @content;
  }
}

@KatieK provided some examples from the outputted CSS: at line 90

/* line 386, ../../../../foundation_master/bower_components/foundation/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

at line 2885

/* line 386, ../../../../foundation_master/bower_components/foundation/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

at line 3085

/* line 386, ../../../../foundation_master/bower_components/foundation/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer №1

There is a known bug in Foundation 5.4.5 related to compatibility issues with Sass 3.4 and global variables handling. This problem arises from the changes introduced in Sass 3.4 regarding how global variables are managed. Specifically, all variable assignments not at the top level of the document are now local by default, requiring the use of the !global flag to overwrite global variables.

You can find more information about these changes in the following link: Sass Changelog

In response to these incompatibilities, the Foundation team released version 5.4.5 with a partial patch to address the issue. However, this new syntax introduced by Sass 3.4 is not recognized by libsass, which is based on Sass 3.2 specifications.

To resolve this bug, it's recommended to update Foundation to version 5.4.6 or later. The specific issue lies within the mixin exports() in the file _functions.scss. You can try replacing it with the updated code snippet provided below:

// _functions.scss
// ...
$modules: () !default;
@mixin exports($name) {
  $module_index: index($modules, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $modules: append($modules, $name);
    @content;
  }
}

If you encounter any further problems, please refer to the official documentation or visit the Foundation Forum for additional discussions and solutions.


Additional Note:

Despite efforts to address compatibility issues, Foundation 5.4.7 continues to face challenges with SASS 3.4 and Compass users. It is recommended to work with SASS 3.2 until all libraries catch up to Sass 3.4 standards. Consider uninstalling Compass (typically associated with SASS 3.4) and switching to libsass (SASS 3.2) as an alternative solution.

For users struggling with compiling SASS using Compass, it may be beneficial to install libsass in Ubuntu using the provided script:

#!/bin/sh

# install_libsass.sh
#
# Script for installing libsass (https://github.com/sass/libsass),
#
# NOTES
#   http://foundation.zurb.com/forum/posts/6803-trouble-creating-f5-project-with-grunt-and-libsass
#   http://mattferderer.com/compile-sass-with-sassc-and-libsass
#

sudo apt-get install git

cd /opt
sudo rm -R -f sassc
sudo rm -R -f libsass
sudo git clone https://github.com/hcatlin/sassc.git
sudo git clone https://github.com/hcatlin/libsass.git

cd /opt/libsass
sudo git submodule update --init --recursive

cd /opt/sassc
## Add the line "export SASS_LIBSASS_PATH=/opt/libsass"
## at the beginning of sassc/Makefile
sudo sh -c "echo 'export SASS_LIBSASS_PATH=/opt/libsass' | cat - Makefile > temp && mv temp Makefile"
sudo make

echo "REBOOT!"

After rebooting, ensure everything is functioning correctly by running the command:

/opt/sassc/bin/sassc -h

Answer №2

Big shoutout to @Cartucho for guiding me in the right direction by checking out the newly updated official documentation.

Here's the process I followed to upgrade my compass setup for compiling foundation:

1) First, I installed bundler

gem install bundler

2) Then, I initiated a new foundation project in a temporary directory

foundation new throwaway_project

3) Next, I copied the necessary Gemfile to the root of my current project. Here's what it looked like

source "https://rubygems.org"

gem "sass", "~> 3.3.0"
gem "compass", "~> 1.0"

4) After that, I executed the bundle command once

bundle

5) Finally, I ran compass watch again using bundler (following the instructions)

bundle exec compass watch

I received some deprecation warnings, but the generated CSS now looks great.

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

External style sheet link is not operational

Inside base.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Base</title> <style> body { background: blue; } </style> </head> <body> &l ...

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution. const div = document.querySelector('.fro ...

Accordion menu with smooth CSS3 transitions

I created a unique accordion menu to replace the select form control, and I am interested in using CSS3 transitions to give it a smooth expand and contract effect. Feel free to check out my work on jsfiddle: http://jsfiddle.net/hKsCD/4/ In order to achi ...

Tips for modifying link height using CSS

I'm currently facing an issue with adjusting the height of "footer a" links that are using Fontface vector icons in the footer. I have added a red border around them to visually identify the problem. Ideally, when navigating through the links, the bor ...

Encountering a problem when transitioning Bootstrap 3 code to version 5

After finding this template on github, I noticed it was a bit outdated with the use of Bootstrap 3. I decided to update it to Bootstrap 5 and replaced the Bootstrap 3 CDN accordingly. However, upon doing so, I encountered some issues. Can anyone help me ...

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

Utilize the CSS exclusively for the specific element

nav ul { } nav ul li { margin-left: 7px; } nav.ul li a, a:link, a:visited { float: left; padding: 7px; margin-left: 15px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul li a:hover { } The styling above is ...

Optimal method for storing text descriptions across two platforms (react native and react)

Hello, I hope you are doing well. I have a question regarding two platforms that I am using - React Native and React (NextJS). Both platforms have forms to save data, one of which is a "text description." Here's the issue: When I input a long passag ...

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

Add a div element only if there is a background image present

I am facing a situation where I need to display an image as the background of a div only if it is available. If the image is not present, I do not want the div to be visible at all. I am working with django templates and here is my current approach: {% if ...

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

Styling Your Website: Embrace CSS or Stick with Tables?

My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

Issue with Angular: RouterLinkActive fails to work properly with formControlName

I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the comp ...

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers. Below is where the animations are being applied: :after { d ...

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is: @media screen and (max-width: 480px){ .class1{ width: inherit; float: none; } .class2{ width: inherit; float: none; } f ...

Switch between dropdowns with jQuery

Issue at Hand: In the scenario illustrated below, there is a side navigation bar containing options that reveal a toggled section upon clicking. Specifically, if you select the third item labeled "Dolar" from the menu, a dropdown with three additional cho ...

Ways to apply distinct styles to various ids and common classes

When dealing with multiple IDs such as id1, id2, and id3 that share common classes like .selectize-input and .select-dropdown, it can become cumbersome to set styles individually for each ID. Instead of writing: #id1 .selectize-input, #id2 .selectize-inp ...