2014-10-31 4 views
6

Ich habe die zurb-Foundation schon eine ganze Weile benutzt.
Ich bin mit einem Bower + Kompass-Setup wie hier beschrieben
http://foundation.zurb.com/docs/sass.htmlzumb foundation - viele doppelte css-Einträge

Heute während der Arbeit bemerkte ich, dass eine Seite eine Weile nahm um ein Problem zu laden und beim Versuch, zu Schwierigkeiten schießen ich bemerkt, dass es eine viele Duplikate in der generierten CSS-Datei.

Ich bin mir sicher, dass dies wahrscheinlich ist, dass ich etwas falsch mache, aber ich weiß nicht, wo ich anfangen soll, und ich weiß nicht einmal welche Informationen zu liefern, die helfen könnten, das Problem einzugrenzen.

Foundation 5.4.5 -> eigentlich läuft 5.4.7

Compass 1.0.1

Jede Hilfe apprecieated.

enter image description here

*************** Update: *****************
So wie sich herausstellt ich war in der Tat 5.4.7 läuft ich in _functions.scss pro @Cartucho sah

und es sieht aus wie der Patch gibt es:

// IMPORT ONCE 
// We use this to prevent styles from being loaded multiple times for compenents 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 einige Beispiele aus ausgegebenen css in Zeile 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; 
} 

in Zeile 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; 
} 

in Zeile 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; 
} 
+1

Es ist wahrscheinlich ein 'extend' schief gelaufen. Versuchen Sie, Zeilennummern in Ihrem Ausgabe-CSS einzuschalten. Aber ohne ein in sich geschlossenes Beispiel können wir Ihnen nicht mehr sagen. – KatieK

+0

Verwenden Sie die Compass-Version oder libsass? Es gibt viele Diskussionen darüber, wie Foundation ihre Bower-Installation für libsass durcheinander gebracht hat, weil sie die neue Version von SASS nicht unterstützen kann. Der gleiche Fehler tritt wahrscheinlich bei der Installation von Compass auf, aber ich habe keine Erfahrung damit. – austinthedeveloper

+0

@KatieK einige Beispiele von ausgegebenen CSS über –

Antwort

6

Es ist ein Fehler der Stiftung 5.4.5. Grundsätzlich ist das Problem begann, als Sass 3.4 einige rückwärts Inkompatibilitäten eingeführt, als globale Variablen Umgang:

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

Alle Variablenzuweisungen nicht auf der obersten Ebene des Dokuments ist jetzt standardmäßig lokal. Wenn es eine globale Variable mit dem gleichen Namen gibt, wird sie nur überschrieben, wenn das! Global-Flag verwendet wird. Beispiel: $ var: value! Global wird $ var global zugewiesen.

Aber diese neue Syntax nicht von libsass erkannt wird (basierend auf Sass 3.2-Spezifikation), so Jungs Foundation 5.4.5 mit einem Teil Patch veröffentlicht: https://github.com/zurb/foundation/commit/8b85dc37fab3da156cdfdddfc8919667b98eb155

Um dies zu beheben, aktualisieren Sie bitte auf 5,4. 6 oder höher. Der Fehler ist in der Mixin exports() von _functions.scss. Versuchen Sie es mit diesem Code (von Foundation 5.4.6) zu ersetzen:

Hoffe es hilft!


EDIT

Es scheint, dass Foundation 5.4.7 noch Kompatibilitätsprobleme mit SASS 3.4 und 3.2 SASS, speziell für Compass Nutzer. Es gibt viele Diskussionen wie this one in Foundation Forum.

Nach official doc arbeitet Foundation gut mit SASS 3.2:

Bis alle Sass Sass Bibliothek 3.4 aufholen können, Stiftung auf Sass 3.2 sein wird. Das heißt, wenn Sie auf Sass 3.4+ und Compass 1.0+ aktualisiert haben, haben sich die Befehle zum Kompilieren eines Compass-Projekts leicht geändert.

Ich kompilierte SASS mit Compass, aber ich gebe wegen dieser Probleme auf. Also, mein letzter Rat ist, Compass (normalerweise SASS 3.4) zu deinstallieren und libsass (basierend auf SASS 3.2) zu verwenden. Ich benutze das folgende Skript für die Installation von libsass in meinem Ubuntu:

#!/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 begining of sassc/Makefile 
sudo sh -c "echo 'export SASS_LIBSASS_PATH=/opt/libsass' | cat - Makefile > temp && mv temp Makefile" 
sudo make 

echo "REBOOT!" 

Dann neu starten und überprüft alles in Ordnung mit diesem Befehl:

/opt/sassc/bin/sassc -h 
+1

Thx für diese Referenz. Auf gar keinen Fall hätte ich das allein gefunden. Ich habe die Details oben aktualisiert.sieht so aus als würde ich 5.4.7 laufen und der Patch ist da im Code. Ist das etwas anderes, denkst du? –

+0

@ w - Ich habe gerade meine Antwort aktualisiert. Hoffe es hilft und viel Glück! – Cartucho

+0

ahh .. habe das Update zu den Kompassanweisungen nicht gesehen (die saugen, weil sie dir nicht sagen, wie man ein vorhandenes Projekt aktualisiert). Letztendlich leite ich die neuen Anweisungen. Ich werde meine genauen Schritte in einer anderen Antwort veröffentlichen. Danke, dass Sie mich in die richtige Richtung weisen! –

1

Dank @Cartucho wurde ich in der richtigen Richtung durch Überprüfung der aktualisierten offiziellen Dokumente.
http://foundation.zurb.com/docs/sass.html

Hier ist, was ich habe meine Verwendung von Kompass zu aktualisieren Fundament zu kompilieren:

1) installiert bundler

gem install bundler 

2) in einem temporären Verzeichnis ein neues Fundament Projekt

gestartet
foundation new throwaway_project 

3) kopiert die dumme Gemfile in die Wurzel meines bestehenden Projekts. es sieht aus wie

source "https://rubygems.org" 

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

4)

bundle 

5) laufen Kompass wieder einmal Bündel lief bundler Uhr verwenden (wie in Anweisungen)

bundle exec compass watch 

ein Bündel von deprecation Warnungen aber erzeugte CSS sieht jetzt gut aus.