Wie wird CSS in Foundation 5 erzeugt, indem $ include-html-classes auf false gesetzt wird? - zurb-foundation

Angeben $include-html-classes zu false und dann Foundation 5 in deine Sass-Datei importieren erzeugt eine Menge CSS. Sieht so aus, als ob es sich dabei um Metasachen für Versionsinformationen handelt, aber einige davon sehen aus wie HTML-Klassen. Ich dachte der ganze Sinn der Verwendung dieser Variable war HTML-Klassen zu entfernen?

Hier ist meine SCSS-Datei:

@import "../foundation/settings";
$include-html-classes: false;
@import "foundation";

Das war in Foundation 4 kein Problem. Was sind diese Stile und wie kann ich sie loswerden?

Antworten:

2 für die Antwort № 1

Das sieht so aus als wäre es ein Bug wo neu istPräsentationsklassen wurden oberhalb der Bedingungen hinzugefügt. Da Sie fragen, wie Sie es beheben können, hier ist der Prozess, wenn Sie nicht warten wollen, bis es offiziell behoben ist.

Verschiebe deine Scss in ein anderes Verzeichnis oder verzweige den Refrain der Foundation Bower.

Aktualisieren Sie Ihre config.rb (Zeile 2), um auf die neuen Dateien zu verweisen, dies ist relativ zu Ihrem Projektverzeichnis

# Require any additional compass plugins here.
add_import_path "some_other_directory/foundation/scss"

Dann müssen Sie jede Datei ändern, die Präsentationsklassen generiert. Zum Glück gibt uns Compass / Sass genau den richtigen Ort.

/* line 259, ../bower_components/foundation/scss/foundation/components/_global.scss */
meta.foundation-version {
font-family: "/5.1.0/";
}

In Zeile 296 sehen Sie die bedingte Zeile:

@if $include-html-global-classes {

und alle Klassen, die darüber hinzugefügt wurden.

Sie müssen diese Zeile auf 260 verschieben und sie sollte wie folgt aussehen.

@include exports("global") {

@if $include-html-global-classes {

meta.foundation-version {
font-family: "/5.1.0/";
}

Da dies Scss ist, könnten Sie entweder die Einrückung verlassen oder korrigieren.

Sie müssten dies für jede Datei, die CSS generiert, mit Compass wiederholen. Wenn Sie eine Kompassuhr verwenden, können Sie Ihre Stylesheets / app.css nach jeder Korrektur überprüfen oder neu laden.